使用 node.destroy() 时如何删除 konva shape/image

Question

在使用 konva 时，我使用一个按钮在我的舞台上多次添加一个形状使用类似于

的东西

      document.getElementById('Rect').addEventListener( "click" , function () {

        let layer = new Konva.Layer();

        let item = new Konva.Rect({
          x: 20,
          y: 20,
          width: 100,
          height: 50,
          fill: 'green',
          stroke: 'black',
          strokeWidth: 4,
          draggable: true,
        });

这会附加一个矩形形状，如果多次单击它还会附加额外的形状我想为用户提供一个选项，可以通过一个按钮删除他希望删除的特定形状。我尝试使用 Konva Tutorials 上提供的上下文菜单教程，但是在实现那里提供的删除功能时

        document.getElementById('delete-button').addEventListener('click', () => {

          currentShape.destroy();

          layer.draw();
        });

无法删除添加到形状的transformer层

        document.getElementById('delete-button').addEventListener('click', () => {
          tr.detach();
          currentShape.destroy();

          layer.draw();
        });

我试图分离/隐藏转换器，但它从形状的所有可用实例中删除了它

如何解决这个问题，非常感谢！！

Answer 1

您正在为 "add" 按钮的 click 事件中的 "delete" 按钮添加一个新的 click 事件侦听器。这意味着每次单击 "delete" 时，都会触发所有侦听器。这将删除所有变形金刚。

相反，您只需添加一个 click 侦听器一次，然后手动找到活动的 Transformer 将其删除。

document.getElementById('delete-button').addEventListener('click', () => {
  const tr = layer.find('Transformer').toArray().find(tr => tr.nodes()[0] === currentShape);
  tr.destroy();
  currentShape.destroy();
  layer.draw();
});

https://codepen.io/lavrton/pen/VweKqrp?editors=0010

使用 node.destroy() 时如何删除 konva shape/image

How to delete a konva shape/image , when using node.destroy()

html

javascript

canvas

html5-canvas

konvajs