填充&画笔样式

本文档是对填充和画笔样式的统一介绍, 属性名加前缀组成对象的属性名

• Node节点属性
  • fill*Shape/Path节点填充样式
  • stroke*图形边框&路径节点画笔样式
  • begin_arrow_fill*/end_arrow_fill*路径节点开始/结束箭头填充样式
  • begin_arrow_stroke*/end_arrow_stroke*路径节点开始/结束箭头画笔样式
• Link链路属性
  • stroke*链路画笔样式
  • from_arrow_fill*/to_arrow_fill*from端/to端箭头填充样式
  • from_arrow_stroke*/to_arrow_stroke*from端/to端箭头画笔样式
• Group分组属性
  • expand_fill*Group展开填充
  • expand_stroke*Group展开图形边框画笔样式
• Label标签
  • label_fill*Label标签文字填充
  • label_stroke*Label标签文字画笔样式
  • label_box_fill*Label标签框填充
  • label_box_stroke*Label标签框画笔样式
• Info提示
  • info_fill*Info提示文字填充
  • info_stroke*Info提示文字画笔样式
  • info_box_fill*Info提示框填充
  • info_box_stroke*Info提示框画笔样式

本文档主要使用图形Node的相关属性进行示例, 其他的属性设置, 只需要替换成对应的属性即可

填充样式

• fillstring图形的填充方式

  有以下可选项:

  • color - 使用颜色填充图形, 值可以是NAME/RGB/RGBA/HEX/HSL/HSLA等颜色格式

                                
                                    node.set("fill", "LightSkyBlue");    //Name
                                    node.set("fill", "#008080");         //HEX
                                    node.set("fill", "rgb(105, 105, 105)");      //RGB
                                    node.set("fill", "rgba(154, 205, 50, 0.8)"); //RGBA
    
                                    node.set("label_fill", "LightSkyBlue");  //Label标签文字
                                    node.set("label_box_fill", "#008080");   //Label标签框
                                    node.set("info_fill", "#008080");        //Info提示文字
                                    node.set("info_box_fill", "rgba(154, 205, 50, 0.8)"); //Info提示框
    
                                    node.set("begin_arrow_fill", "LightSkyBlue");   //路径节点开始箭头
                                    node.set("end_arrow_fill", "LightSkyBlue");     //路径节点结束箭头
    
                                    link.set("from_arrow_fill", "LightSkyBlue");    //Link开始箭头
                                    link.set("to_arrow_fill", "LightSkyBlue");      //Link结束箭头
                                
                            

  • linear_gradient使用线性渐变填充图形, 一般配合fill_gradient_direction和fill_gradient_colors一起使用

                                
                                    node.set("fill", "linear_gradient");                //渐变类型
                                    node.set("fill_gradient_direction", "lt_to_rb");    //渐变方向
                                    node.set("fill_gradient_colors", {                  //渐变颜色
                                        0: "black",     //起始颜色为black
                                        0.5: "red",     //中间50%位置的颜色为red
                                        1: "white"      //结束颜色为white
                                    });
    
                                    node.set("label_fill", "linear_gradient");       //Label标签文字
                                    node.set("label_box_fill", "linear_gradient");   //Label标签框
                                    node.set("info_fill", "linear_gradient");        //Info提示文字
                                    node.set("info_box_fill", "linear_gradient");    //Info提示框
                                
                            

  • radial_gradient使用放射性渐变填充图形, 一般配合fill_gradient_direction和fill_gradient_colors一起使用

                                
                                    node.set("fill", "radial_gradient");                //渐变类型
                                    node.set("fill_gradient_direction", "center");      //渐变方向
                                    node.set("fill_gradient_colors", {                  //渐变颜色
                                        0: "black",     //起始颜色为black
                                        0.5: "red",     //中间50%位置的颜色为red
                                        1: "white"      //结束颜色为white
                                    });
    
                                    node.set("label_fill", "radial_gradient");       //Label标签文字
                                    node.set("label_box_fill", "radial_gradient");   //Label标签框
                                    node.set("info_fill", "radial_gradient");        //Info提示文字
                                    node.set("info_box_fill", "radial_gradient");    //Info提示框
                                
                            

  • conic_gradient使用锥形渐变填充图形, 请注意浏览器兼容性

                                
                                    node.set("fill", "conic_gradient");             //渐变类型
                                    node.set("fill_gradient_colors", {              //渐变颜色
                                        0: "black",     //起始颜色为black
                                        0.5: "red",     //中间50%位置的颜色为red
                                        1: "white"      //结束颜色为white
                                    });
    
                                    node.set("label_fill", "conic_gradient");        //Label标签文字
                                    node.set("label_box_fill", "conic_gradient");    //Label标签框
                                    node.set("info_fill", "conic_gradient");         //Info提示文字
                                    node.set("info_box_fill", "conic_gradient");     //Info提示框
                                
                            

  • pattern使用纹理图案填充图形, 一般配合fill_pattern_image一起使用

                                
                                    node.set("fill", "pattern");
                                    node.set("fill_pattern_image", "windmill");
    
                                    node.set("label_fill", "pattern");       //Label标签文字
                                    node.set("label_box_fill", "pattern");   //Label标签框
                                    node.set("info_fill", "pattern");        //Info提示文字
                                    node.set("info_box_fill", "pattern");    //Info提示框
                                
                            

• fill_gradient_directionstring渐变填充的颜色渐变方向

  有以下可选项(矩形对角线顺时方向旋转):

  • lt_to_rb从左上向右下方向渐变
  • t_to_b从上向下渐变
  • rt_to_lb从右上向左下渐变
  • r_to_l从右向左渐变
  • rb_to_lt从右下向左上渐变
  • b_to_t从下向上渐变
  • lb_to_rt从左下向右上渐变
  • l_to_r从左向右渐变
  • center从中心向放射渐变(只适用于radial_gradient类型的渐变)

                      
                          node.set("fill_gradient_direction", "lt_to_rb");             //形状/路径节点填充
  
                          node.set("label_fill_gradient_direction", "t_to_b");         //Label标签文字
                          node.set("label_box_fill_gradient_direction", "rt_to_lb");   //Label标签框
  
                          node.set("info_fill_gradient_direction", "r_to_l");          //Info提示文字
                          node.set("info_box_fill_gradient_direction", "rb_to_lt");    //Info提示框
                      
                  

• fill_gradient_colorsobject渐变填充的梯度颜色对象

  渐变颜色由百分比位置(0-1)和颜色组成

                      
                          node.set("fill_gradient_colors", {           //形状/路径节点填充
                              0: "black",     //起始颜色为black
                              0.5: "red",     //中间50%位置的颜色为red
                              1: "white"      //结束颜色为white
                          });
  
                          node.set("label_fill_gradient_colors", {0: "black", 1: "red"});     //Label标签文字
                          node.set("label_box_fill_gradient_colors", {0: "black", 1: "red"}); //Label标签框
  
                          node.set("info_fill_gradient_colors", {0: "black", 1: "red"});      //Info提示文字
                          node.set("info_box_fill_gradient_colors", {0: "black", 1: "red"});  //Info提示框
                      
                  

• fill_pattern_imagestring | img纹理填充的图片

  属性值可以是注册的图片, 也可以是img对象

                      
                          node.set("fill_pattern_image", "windmill");             //形状/路径节点填充
  
                          node.set("label_fill_pattern_image", "windmill");       //Label标签文字
                          node.set("label_box_fill_pattern_image", "windmill");   //Label标签框
  
                          node.set("info_fill_pattern_image", "windmill");        //Info提示文字
                          node.set("info_box_fill_pattern_image", "windmill");    //Info提示框
                      
                  

画笔样式

• strokestring线条的画笔样式

  有如下可选项

  • color - 使用颜色绘制图形, 值可以是NAME/RGB/RGBA/HEX/HSL/HSLA等颜色格式

                                
                                    link.set("stroke","LightSkyBlue");    //Name
                                    link.set("stroke","#008080");         //HEX
                                    link.set("stroke","rgb(105, 105, 105)");      //RGB
                                    link.set("stroke","rgba(154, 205, 50, 0.8)"); //RGBA
    
                                    node.set("label_stroke","LightSkyBlue");                //Label标签文字
                                    node.set("label_box_stroke","#008080");                 //Label标签框
                                    node.set("info_stroke","rgb(105, 105, 105)");           //Info提示文字
                                    node.set("info_box_stroke","rgba(154, 205, 50, 0.8)");  //Info提示框
    
                                    node.set("begin_arrow_stroke", "LightSkyBlue");   //路径节点开始箭头
                                    node.set("end_arrow_stroke", "LightSkyBlue");     //路径节点结束箭头
    
                                    link.set("from_arrow_stroke", "LightSkyBlue");    //Link开始箭头
                                    link.set("to_arrow_stroke", "LightSkyBlue");      //Link结束箭头
                                
                            

  • linear_gradient使用线性渐变绘制图形, 一般配合stroke_gradient_direction和stroke_gradient_colors一起使用

                                
                                    node.set("stroke", "linear_gradient");                //渐变类型
                                    node.set("stroke_gradient_direction", "lt_to_rb");    //渐变方向
                                    node.set("stroke_gradient_colors", {                  //渐变颜色
                                        0: "black",     //起始颜色为black
                                        0.5: "red",     //中间50%位置的颜色为red
                                        1: "white"      //结束颜色为white
                                    });
    
                                    node.set("label_stroke", "linear_gradient");        //Label标签文字
                                    node.set("label_box_stroke", "linear_gradient");    //Label标签框
                                    node.set("info_box_stroke", "linear_gradient");     //Info提示文字
                                    node.set("info_box_stroke", "linear_gradient");     //Info提示框
                                
                            

  • radial_gradient使用放射性渐变绘制图形, 一般配合stroke_gradient_direction和stroke_gradient_colors一起使用

                                
                                    node.set("stroke","radial_gradient");                 //渐变类型
                                    node.set("stroke_gradient_direction", "center");      //渐变方向
                                    node.set("stroke_gradient_colors", {                  //渐变颜色
                                        0: "black",     //起始颜色为black
                                        0.5: "red",     //中间50%位置的颜色为red
                                        1: "white"      //结束颜色为white
                                    });
    
                                    node.set("label_stroke", "radial_gradient");        //Label标签文字
                                    node.set("label_box_stroke", "radial_gradient");    //Label标签框
                                    node.set("info_box_stroke", "radial_gradient");     //Info提示文字
                                    node.set("info_box_stroke", "radial_gradient");     //Info提示框
                                
                            

  • conic_gradient使用锥形渐变绘制图形, 请注意浏览器兼容性

                                
                                    node.set("stroke","conic_gradient");    //渐变类型
                                    node.set("stroke_gradient_colors", {    //渐变颜色
                                        0: "black",     //起始颜色为black
                                        0.5: "red",     //中间50%位置的颜色为red
                                        1: "white"      //结束颜色为white
                                    });
    
                                    node.set("label_stroke", "conic_gradient");        //Label标签文字
                                    node.set("label_box_stroke", "conic_gradient");    //Label标签框
                                    node.set("info_box_stroke", "conic_gradient");     //Info提示文字
                                    node.set("info_box_stroke", "conic_gradient");     //Info提示框
                                
                            

• stroke_gradient_directionstring渐变绘制的颜色渐变方向

  有以下可选项(矩形对角线顺时方向旋转)

  • lt_to_rb从左上向右下方向渐变
  • t_to_b从上向下渐变
  • rt_to_lb从右上向左下渐变
  • r_to_l从右向左渐变
  • rb_to_lt从右下向左上渐变
  • b_to_t从下向上渐变
  • lb_to_rt从左下向右上渐变
  • l_to_r从左向右渐变
  • center从中心向放射渐变(只适用于radial_gradient类型的渐变)

                      
                          node.set("stroke_gradient_direction", "lt_to_rb");
  
                          node.set("label_stroke_gradient_direction", "lt_to_rb");        //Label标签文字
                          node.set("label_box_stroke_gradient_direction", "lt_to_rb");    //Label标签框
  
                          node.set("info_stroke_gradient_direction", "lt_to_rb");         //Info提示文字
                          node.set("info_box_stroke_gradient_direction", "lt_to_rb");     //Info提示框
                      
                  

• stroke_gradient_colorsobject画笔渐变样式的梯度颜色对象, 渐变颜色由百分比位置(0-1)和颜色组成

                      
                          node.set("stroke_gradient_colors", {
                              0: "black",     //起始颜色为black
                              0.5: "red",     //中间50%位置的颜色为red
                              1: "white"      //结束颜色为white
                          });
  
                          node.set("label_stroke_gradient_colors", {0: "black", 1: "red"});       //Label标签文字
                          node.set("label_box_stroke_gradient_colors", {0: "black", 1: "red"});   //Label标签框
  
                          node.set("info_stroke_gradient_colors", {0: "black", 1: "red"});        //Info提示文字
                          node.set("info_box_stroke_gradient_colors", {0: "black", 1: "red"});    //Info提示框
                      
                  

• stroke_line_widthnumber画笔的线宽

                      
                          link.set("stroke_line_width", 2);
  
                          node.set("label_stroke_line_width", 2);         //Label标签文字
                          node.set("label_box_stroke_line_width", 2);     //Label标签框
  
                          node.set("info_stroke_line_width", 2);          //Info提示文字
                          node.set("info_box_stroke_line_width", 2);      //Info提示框
                      
                  

• stroke_line_dasharray画笔的虚线模式参数, 使用一组值来指定描述模式的线和间隙的交替长度

                      
                          link.set("stroke_line_dash", [6, 3]);
  
                          node.set("label_stroke_line_dash", [6, 3]);       //Label标签文字
                          node.set("label_box_stroke_line_dash", [6, 3]);   //Label标签框
  
                          node.set("info_stroke_line_dash", [6, 3]);        //Info提示文字
                          node.set("info_box_stroke_line_dash", [6, 3]);    //Info提示框
                      
                  

• stroke_line_dash_offsetnumber画笔虚线的偏移, 可以通过设置offset实现动画效果

                      
                          link.set("stroke_line_dash_offset", 2);
  
                          node.set("label_stroke_line_dash_offset", 2);       //Label标签文字
                          node.set("label_box_stroke_line_dash_offset", 2);   //Label标签框
  
                          node.set("info_stroke_line_dash_offset", 2);        //Info提示文字
                          node.set("info_box_stroke_line_dash_offset", 2);    //Info提示框