KonvaJS，可以用遮罩代替clipFunc吗？ [英] KonvaJS, masking instead of clipFunc possible?

问题描述

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

像这样：

演示： http://jsbin.com/qahulidube/2/edit?js，输出

注意 ：请记住定义 hitFunc ，因为 Konva 命中检测不适用于这种 sceneFunc

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

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

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

i'm using konvajs and need some help! Assume that i need an image that draggable inside a complex shape. So i wonder that can it be possible to using masking with Konva.Group instead of clipFunc OR a way to convert an masking image to canvas-clip-path and use with clipFunc!

like this: Masking draggable

解决方案

By default Konva supports only simple clip with rectangle shape and clipping with clipFunc where you can describe required path.

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

In both cases, clipping is defined as canvas paths, and you can't define clip here as an image.

But you can draw directly into the canvas with custom 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";

The output will be:

DEMO: http://jsbin.com/qahulidube/2/edit?js,output

Note: remember to define hitFunc because Konva hit detection will not work for such sceneFunc

Another two demos with other behaviors:

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

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

这篇关于KonvaJS，可以用遮罩代替clipFunc吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！