G6Editor 边的参数配置

  ⚠️ 注意: 当边太细交互不易命中时,请设置 lineAppendWidth 属性值。

属性:

属性名含义备注
path 线条路径 可以是 String 形式,也可以是线段的数组。
startArrow 起始端的箭头 为 true 时在边的结束端绘制默认箭头,为 false 时不绘制结束端箭头。也可以是一个通过 path 自定义的箭头
endArrow 末尾端的箭头 为 true 时在边的开始端绘制默认箭头,为 false 时不绘制开始端箭头。也可以是一个通过 path 自定义的箭头
lineAppendWidth 边的击中范围 提升边的击中范围,扩展响应范围,数值越大,响应范围越广
lineCap 设置线条的结束端点样式  
lineJoin 设置两条线相交时,所创建的拐角形状  
lineWidth 设置当前的线条宽度  
miterLimit 设置最大斜接长度  
lineDash 设置线的虚线样式,可以指定一个数组 一组描述交替绘制线段和间距(坐标空间单位)长度的数字。 如果数组元素的数量是奇数, 数组的元素会被复制并重复。例如, [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

用法:

 1 group.addShape('path', {
 2   attrs: {
 3     startArrow: {
 4       // 自定义箭头指向(0, 0),尾部朝向 x 轴正方向的 path
 5       path: 'M 0,0 L 20,10 L 20,-10 Z',
 6       // 箭头的偏移量,负值代表向 x 轴正方向移动
 7       // d: -10,
 8     },
 9     endArrow: {
10       // 自定义箭头指向(0, 0),尾部朝向 x 轴正方向的 path
11       path: 'M 0,0 L 20,10 L 20,-10 Z',
12       // 箭头的偏移量,负值代表向 x 轴正方向移动
13       // d: -10,
14     },
15     path: [
16       ['M', 100, 100],
17       ['L', 200, 200],
18     ],
19     stroke: '#000',
20     lineWidth: 8,
21     lineAppendWidth: 5,
22   },
23   // must be assigned in G6 3.3 and later versions. it can be any value you want
24   name: 'path-shape',
25 });

附:G6最新文档:https://g6.antv.vision/zh/docs/manual/introduction

 

原文地址:https://www.cnblogs.com/minjh/p/15266642.html