箭头样式

箭头用于标示方向, 一般在链路和路径节点中使用

• 链路
  • from_arrow*链路from端的箭头样式
  • to_arrow*链路to端的箭头样式
• 路径节点
  • begin_arrow*路径节点begin端的箭头样式
  • end_arrow*路径节点end端的箭头样式

在下列属性基础上加上前缀就是对应的属性名(请参考代码示例)

形状大小

• arrow_shapestring箭头的形状, 默认为null(不显示箭头)

  有如下可选项:

  • arrow箭头
  • stealth_arrow燕尾形箭头
  • open_arrow开放形箭头
  • rect矩形
  • circle圆形
  • ellipse椭圆
  • roundrect圆角矩形
  • triangle三角形
  • right_triangle直角三角形
  • diamond菱形
  • pentagon五边形
  • hexagon六边形
  • star星形
  • parallelogram平行四边形
  • cloud云

                      
                          //Node
                          node.set("begin_arrow_shape", "arrow");
                          node.set("end_arrow_shape", "stealth_arrow");
                          gView.set("node_begin_arrow_shape", "open_arrow");  //全局设置
                          gView.set("node_end_arrow_shape", "arrow");         //全局设置
  
                          //Link
                          link.set("from_arrow_shape", "arrow");
                          link.set("to_arrow_shape", "stealth_arrow");
                          gView.set("link_from_arrow_shape", "open_arrow");   //全局设置
                          gView.set("link_to_arrow_shape", "arrow");          //全局设置
                      
                  

• arrow_sizeinteger箭头的大小, 默认值为2,

  箭头的实际大小由size大小和线宽共同决定, 请参考Link箭头示例

                      
                          //Node
                          node.set("begin_arrow_size", 3);
                          node.set("end_arrow_size", 6);
                          gView.set("node_begin_arrow_size", 3);  //全局设置
                          gView.set("node_end_arrow_size", 6);    //全局设置
  
                          //Link
                          link.set("from_arrow_size", 3);
                          link.set("to_arrow_size", 6);
                          gView.set("link_from_arrow_size", 3);  //全局设置
                          gView.set("link_to_arrow_size", 6);    //全局设置
                      
                  

• arrow_offsetnumber箭头的偏移, 默认值为0(不偏移),
  • 0 ≤ offset ≤ 1 表示相对于整个路径长度的偏移百分数
  • 1 < offset表示实际的偏移大小
  请参考Link相关箭头示例

                      
                          //Node
                          node.set("begin_arrow_offset", 3);
                          node.set("end_arrow_offset", 0.5); //50%
                          gView.set("node_begin_arrow_offset", 3); //全局设置
                          gView.set("node_end_arrow_offset", 0.5); //全局设置
  
                          //Link
                          link.set("from_arrow_offset", 3);
                          link.set("end_arrow_offset", 0.5); //50%
                          gView.set("link_from_arrow_offset", 3); //全局设置
                          gView.set("link_to_arrow_offset", 0.5); //全局设置
                      
                  

填充样式

• arrow_fillstring箭头的填充样式, 如果没有设置, 默认使用图元的stroke样式进行渲染

  请参考填充和画笔样式#fill

                      
                          //Node
                          node.set("begin_arrow_fill","#008080");
                          node.set("end_arrow_fill","LightSkyBlue");
                          gView.set("node_begin_arrow_fill", "#008080");      //全局设置
                          gView.set("node_end_arrow_fill", "LightSkyBlue");   //全局设置
  
                          //Link
                          link.set("from_arrow_fill","#008080");
                          link.set("to_arrow_fill","LightSkyBlue");
                          gView.set("link_from_arrow_fill", "#008080");      //全局设置
                          gView.set("link_to_arrow_fill", "LightSkyBlue");   //全局设置
                      
                  

画笔样式

• arrow_strokestring箭头边缘的画笔样式, 如果没有设置并且是open_arrow类型的箭头, 默认使用图元的stroke样式进行渲染

  请参考填充和画笔样式#stroke

                      
                          //Node
                          node.set("begin_arrow_stroke","LightSkyBlue");
                          node.set("end_arrow_stroke","#008080");
                          gView.set("node_begin_arrow_stroke","rgb(105, 105, 105)");      //全局设置
                          gView.set("node_end_arrow_stroke","rgba(154, 205, 50, 0.8)");   //全局设置
  
                          //Link
                          link.set("from_arrow_stroke","LightSkyBlue");
                          link.set("to_arrow_stroke","#008080");
                          gView.set("link_from_arrow_stroke","rgb(105, 105, 105)");       //全局设置
                          gView.set("link_to_arrow_stroke","rgba(154, 205, 50, 0.8)");    //全局设置
                      
                  

• arrow_stroke_line_widthnumber箭头画笔的线宽, 如果没有设置并且是open_arrow类型的箭头, 默认使用图元的stroke_line_width样式进行渲染

                      
                          //Node
                          node.set("begin_arrow_stroke_line_width", 2);
                          node.set("end_arrow_stroke_line_width", 3);
                          gView.set("node_begin_arrow_stroke_line_width",2);      //全局设置
                          gView.set("node_end_arrow_stroke_line_width",3);        //全局设置
  
                          //Link
                          link.set("from_arrow_stroke_line_width", 2);
                          link.set("to_arrow_stroke_line_width", 3);
                          gView.set("link_from_arrow_stroke_line_width",2);      //全局设置
                          gView.set("link_to_arrow_stroke_line_width",3);        //全局设置
                      
                  

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

                      
                          //Node
                          node.set("begin_arrow_stroke_line_dash", [6, 3]);
                          node.set("end_arrow_stroke_line_dash", [6, 3]);
                          gView.set("node_begin_arrow_stroke_line_dash", [6, 3]); //全局设置
                          gView.set("node_end_arrow_stroke_line_dash", [6, 3]);   //全局设置
  
                          //Link
                          link.set("from_arrow_stroke_line_dash", [6, 3]);
                          link.set("to_arrow_stroke_line_dash", [6, 3]);
                          gView.set("link_from_arrow_stroke_line_dash", [6, 3]);  //全局设置
                          gView.set("link_to_arrow_stroke_line_dash", [6, 3]);    //全局设置