KonvaJS, маскировка вместо clipFunc возможна?

Question

Я использую konvajs и мне нужна помощь! Предположим, мне нужно изображение, которое можно перетаскивать внутри сложной формы. Поэтому мне интересно, можно ли использовать маскирование с Konva.Group вместо clipFunc ИЛИ способ конвертировать маскирующее изображение в canvas-clip-path и использовать с clipFunc!

как это: маскировка перетаскивается

Answer 1

По умолчанию 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