javascript - KonvaJS，可以用 mask 代替clipFunc吗？

我正在使用konvajs，需要一些帮助！
假设我需要在复杂形状内可拖动的图像。
因此，我想知道是否可以通过Konva.Group而不是clipFunc使用遮罩，或者将遮罩图像转换为canvas-clip-path并与clipFunc一起使用的方法！

像这样：Masking draggable

最佳答案

默认情况下，Konva仅支持具有矩形形状的简单剪辑，并仅支持clipFunc在其中可以描述所需路径的剪辑。

https://konvajs.github.io/docs/clipping/Clipping_Function.html

在这两种情况下，剪辑都定义为画布路径，并且您不能在此处将剪辑定义为图像。

但是您可以使用自定义Konva.Shape直接绘制到画布中。

const girafe = new Image();
girafe.onload = () => {
  const img = new Image();
  img.onload = () => {
    const image = new Konva.Shape({
    sceneFunc: (ctx) => {
      ctx.drawImage(girafe, 0, 0);
      ctx.globalCompositeOperation = 'source-in';
      ctx.drawImage(img, 0, 0);
    },
    // (!) important
    // for this case you need to define custom hit function
    hitFunc: (ctx) => {
      ctx.rect(0, 0, girafe.width, girafe.height);
      ctx.fillStrokeShape(image);
    },
    draggable: true
  });
  layer.add(image);
  layer.draw();
  };
  img.src = "http://i.imgur.com/kKjW3U4.png";

}
girafe.src = "http://i.imgur.com/fQX2P8S.png";

输出将是：



演示：http://jsbin.com/qahulidube/2/edit?js,output

注意：请记住定义hitFunc，因为Konva匹配检测不适用于此类sceneFunc

其他两个具有其他行为的演示：

http://jsbin.com/huserozire/1/edit?js,output

http://jsbin.com/hawiricaqu/1/edit

关于javascript - KonvaJS，可以用 mask 代替clipFunc吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45094648/