clipPath - 裁剪路径

通过 clipPath 属性传入一个图形控件实例作为裁剪区域, 被裁剪的图形只会在裁剪区域内可见。利用 Canvas 原生的 clip() API 实现。

用法

// 创建裁剪区域(一个圆形)
const clipCircle = g.createShape('circle', {
    center: {x: 300, y: 200}, radius: 80,
    style: { close: true }
});
clipCircle.initPoints();

// 被裁剪的矩形
g.createShape('rect', {
    position: {x: 180, y: 120}, width: 240, height: 160, radius: 12,
    style: {
        fill: 'linear-gradient(0 0 240 160, #e94560 0, #00d4ff 1)',
        clipPath: clipCircle  // 传入裁剪区域
    }
});