ZRender绘制空心圆环的方法

2023-11-13

ZRender绘制空心圆环，推荐使用zrender.Circle，设置边框lineWidth，设置填充样式为 fill: ‘none’。

完整示例：

const opt = {
    shape: {
        cx: 0,
        cy: 0,
        r: 30                 // 半径
    },
    style: {
        stroke: '#3f94ef',    // 边框颜色
        lineWidth: 2,         // 边框宽度
        fill: 'none'          // 填充样式
    },
};

const circle = new zrender.Circle(opt);

最关键的是填充样式，需要指定为’none‘，因为默认值为‘#000‘。

这样的圆环中间区域会穿透事件，触发下一层元素。

（版权归cpury.com所有，转载请注明出处。）

WEB开发