Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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:
http://jsbin.com/huserozire/1/edit?js,output
http://jsbin.com/hawiricaqu/1/edit
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.