边属性

通用属性

属性名含义备注
fill设置用于填充绘画的颜色、渐变或模式对应canvas属性fillStyle
stroke设置用于笔触的颜色、渐变或模式对应canvas属性strokeStyle
shadowColor设置用于阴影的颜色
shadowBlur设置用于阴影的模糊级别数值越大,越模糊
shadowOffsetX设置阴影距形状的水平距离
shadowOffsetY设置阴影距形状的垂直距离
opacity设置绘图的当前 alpha 或透明值对应canvas属性globalAlpha

线条 Path

特别注意边太细时候点击不中,请设置 lineAppendWidth 属性值。

属性

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

用法

  1. group.addShape('path', {
  2. attrs: {
  3. startArrow: {
  4. path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0),指向 x 轴正方向的path
  5. d: 10,
  6. },
  7. endArrow: {
  8. path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0),指向 x 轴正方向的path
  9. d: 10,
  10. },
  11. path: [
  12. ['M', 100, 100],
  13. ['L', 200, 200],
  14. ],
  15. stroke: '#000',
  16. lineWidth: 8,
  17. lineAppendWidth: 5,
  18. },
  19. });