javascript KonvaJS,可以用屏蔽代替clipFunc吗?

tvz2xvvm  于 2023-01-07  发布在  Java
关注(0)|答案(1)|浏览(215)

我正在使用konvajs,需要一些帮助!
假设我需要一个可在复杂形状中拖动的图像。
我想知道是否有可能使用Konva.Group而不是clipFunc来使用蒙版,或者有一种方法可以将蒙版图像转换为画布剪辑路径并使用clipFunc!
类似于:Masking draggable

xa9qqrwz

xa9qqrwz1#

默认情况下,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

相关问题