Javascript KonvaJS，可以用掩蔽代替clipFunc吗？_Javascript_Draggable_Masking_Konvajs

Javascript KonvaJS，可以用掩蔽代替clipFunc吗？

javascript

Javascript KonvaJS，可以用掩蔽代替clipFunc吗？,javascript,draggable,masking,konvajs,Javascript,Draggable,Masking,Konvajs,我正在使用konvajs，需要帮助！假设我需要一个可以在复杂形状中拖动的图像。因此，我想知道是否有可能使用Konva.Group的蒙版来代替clipFunc，或者将蒙版图像转换为画布剪辑路径并与clipFunc一起使用如下所示：默认情况下Konva仅支持矩形形状的简单剪辑和clipFunc的剪辑，您可以在其中描述所需的路径在这两种情况下，剪辑都定义为画布路径，不能将剪辑定义为图像但您可以使用自定义Konva.Shape直接在画布中绘制 const girafe = new Image

我正在使用konvajs，需要帮助！假设我需要一个可以在复杂形状中拖动的图像。因此，我想知道是否有可能使用Konva.Group的蒙版来代替clipFunc，或者将蒙版图像转换为画布剪辑路径并与clipFunc一起使用

如下所示：

默认情况下

Konva

仅支持矩形形状的简单剪辑和

clipFunc

的剪辑，您可以在其中描述所需的路径

在这两种情况下，剪辑都定义为画布路径，不能将剪辑定义为图像

但您可以使用自定义

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";

输出将是：

演示：

注意：记住定义

hitFunc

，因为

Konva

命中检测将不适用于此类

sceneFunc

其他行为的另外两个演示：