⚠️ 注意: 当边太细交互不易命中时,请设置 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