3

我想使用圆形路径剪辑一个组,但该组的 clipFunc 似乎没有执行,关于如何使用 clipFunc 属性的文档有点参差不齐。

这是我当前尝试的一个jsfiddle

以下是相关代码:

var stage = new Kinetic.Stage({
  container: 'container',
  width: 500,
  height: 500
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
   clipFunc: function(canvas) {
      var context = canvas.getContext();
      context.beginPath();
      context.arc(250, 250, 50, 0, 2 * Math.PI, false);
      context.clip();
   }
});

var rect = new Kinetic.Rect({
   x: 150,
   y: 225,
   width: 200,
   height: 200,
   fill: 'blue',
   stroke: 'black',
   strokeWidth: 2
});

group.add(rect);
layer.add(group);
stage.add(layer);

目前,如果我在 clipFunc 函数中放置一个断点,它永远不会被击中。

4

1 回答 1

3

放弃了对 clipFunc 的支持,取而代之的是 clip,它只是一个矩形剪辑区域。如果要模拟圆形剪辑,可以使用 toImage() 将组转换为图像,然后使用图像填充图案绘制圆形。

删除了 clipFunc 属性,因为画布剪辑功能在非矩形剪辑区域中不能很好地发挥作用,因为边缘是非抗锯齿的(这对于圆形路径尤其明显)

于 2013-08-27T07:09:49.507 回答