Могу ли я привязать событие щелчка к сцене и двойной щелчок к элементу внутри нее?

В Konva я хочу применить щелчок к сцене, а двойной щелчок — к фигуре внутри сцены. Интересно, как лучше всего это сделать.

В конечном счете, я хотел создать план этажа, где я мог бы добавлять таблицы (прямоугольники) на карту. Если я нажму на таблицы, Konva позволит мне добавить преобразователь вращения. Если я нажму за пределами столов, трансформеры на сцене исчезнут. Я надеюсь, что если я дважды щелкну таблицы, я смогу удалить эту фигуру. НО - похоже, я не могу одновременно щелкнуть по сцене и проверить двойной щелчок по элементу внутри сцены. Код, который у меня есть, — это простейший известный мне пример, демонстрирующий мое невежество в отношении щелчков и двойных щелчков как на сцене, так и в элементе на сцене.

//If you click on the stage, it creates the circle. And if you click on the circle, once created, I'm hoping it will be destroyed. It doesn't seem to like clicks and doubleclicks together in one area.

stage.on('click', function (e) {
    var circle = new Konva.Circle({
        x: 100,
        y: 100,
        fill: 'blue',
        radius: 30,
        draggable: true,
        name: "circle"
    });
    layer.add(circle);
    layer.draw();
});

circle.on('dblclick', function (e) {
    this.destroy();
});

Хотел бы я удалить круг. Круг не удаляется.


javascript events binding konvajs
person Corey Miller    schedule 02.04.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward 

stage.on('click', function (e) {
  const clickedOnEmptyArea = e.target === stage;
  if (!clickedOnEmptyArea) {
    return;
  }
  var circle = new Konva.Circle({
    x: stage.getPointerPosition().x,
    y: stage.getPointerPosition().y,
    fill: 'blue',
    radius: 30,
    draggable: true,
    name: "circle"
  });
  layer.add(circle);
  layer.draw();
});

stage.on('dblclick', function (e) {
  const clickedOnEmptyArea = e.target === stage;
  if (clickedOnEmptyArea) {
    return;
  }
  e.target.destroy();
  layer.draw();
});

Демонстрация: https://jsbin.com/hogahegame/edit?html,js,output< /а>

person lavrton    schedule 02.04.2019