{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ea546e4999c4b5937f5098c0df1f3852-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

通用属性

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

线条 Path

\n

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

\n

属性

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

用法

\n
group.addShape('path', {\n  attrs: {\n    startArrow: {\n      path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path\n      d: 10,\n    },\n    endArrow: {\n      path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path\n      d: 10,\n    },\n    path: [\n      ['M', 100, 100],\n      ['L', 200, 200],\n    ],\n    stroke: '#000',\n    lineWidth: 8,\n    lineAppendWidth: 5,\n  },\n});\n
"}