KonvaJS, masking instead of clipFunc possible?

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/45094648/konvajs-masking-instead-of-clipfunc-possible

标签

javascript