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

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

1 голос
/ 02 апреля 2019

В 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();
});

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

1 Ответ

0 голосов
/ 02 апреля 2019 
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

...