Question

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

希望我可以删除圈子。该圈子不会删除。

Answer 1

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

我可以将click事件绑定到舞台上，并将doubleclick绑定到其中的元素吗？

1 个答案: