如何删除konva shapeimage，当使用node.destroy()。

Question

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

      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教程，但当实现删除功能，有

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

          currentShape.destroy();

          layer.draw();
        });

无法删除添加到形状中的变压器层。

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

          layer.draw();
        });

我试着拆开变压器隐藏它，但它从形状的所有可用实例中删除了它。

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

Answer 1

你正在添加一个新的 click 内的 "删除 "按钮的事件监听器。click 事件的 "添加 "按钮。这意味着每次你点击 "删除 "时，所有的监听器都会被触发。这就删除了所有的变换器。

取而代之的是，您只需要添加一个 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.iolavrtonpenVweKqrp?editors=0010。