通过 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 // 传入裁剪区域
}
});