I'm using konvajs and need some help!
Assume that I need an image that's draggable inside a complex shape.
I wonder if it's possible to use masking with Konva.Group instead of clipFunc OR a way to convert a masking image to canvas-clip-path and use it 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:
