Как нарисовать перевернутый элемент на слое в KonvaJS - PullRequest
Новая
       7

Как нарисовать перевернутый элемент на слое в KonvaJS

0 голосов
/ 06 января 2019

есть ли способ добавить фигуру в KonvaJS, которая рисует за ее пределами? По сути, это «дыра» в слое, так что я могу выделить точку на холсте, сделав все вокруг круга темнее (черный с низкой непрозрачностью).

Любая помощь очень ценится!

Приветствия

Edit: Вот изображение того, что я имею в виду (мне пока не разрешено его встраивать): https://i.imgur.com/gvTqgN0.jpg

Я надеялся, что может быть что-то вроде этого: 

Konva.Circle({
  x: 100,
  y: 100,
  radius: 50,
  opacity: 0.3,
  fill: 'black',
  inverted: true
})

и это, в свою очередь, "не рисовало бы" круг, но все вокруг него получило бы заданные атрибуты. В этом случае все было бы немного темнее, кроме круга.

1 Ответ

0 голосов
/ 07 января 2019

Вы можете сделать это с пользовательской формой: 

const shape = new Konva.Shape({
  width: stage.width(),
  height: stage.height(),
  // what is color of background ?
  fill: 'rgba(0,0,0,0.2)',
  sceneFunc: (ctx, shape) => {
    // draw background
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(shape.width(), 0);
    ctx.lineTo(shape.width(), shape.height());
    ctx.lineTo(0, shape.height());
    ctx.lineTo(0, 0);

    // now cut circle from the background
    // we can do this by useing arc
    const x = 200;
    const y = 200;
    const radius = 10;
    // but it must be counter-clockwise
    // so the last argument true is very important here
    ctx.arc(200, 200, 100, 0, Math.PI * 2, true);
    ctx.fillStrokeShape(shape);
  },

  // remove shape from hit graph, so it is not visible for events
  listening: false
});

Демо: https://jsbin.com/tevejujafi/3/edit?html,js,output

...