使用 node.destroy() 时如何删除 konva 形状/图像

Posted 2023-03-25

【中文标题】使用 node.destroy() 时如何删除 konva 形状/图像

【英文标题】：How to delete a konva shape/image , when using node.destroy()

【发布时间】：2020-10-04 00:40:53

【问题描述】：

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

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

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

【问题讨论】：

你能做一个演示吗？正如我所见，您在每次单击按钮时都会添加一个新图层。我不确定这是正确的行为。此外，您需要重绘放置变压器的图层。

嘿，谢谢您的回复，演示链接：codepen.io/Tulsani/pen/OJMRQPr 在这里，如果我尝试使用舞台上的按钮添加两个矩形并删除一个，则剩余一个的变压器也会被删除。谢谢你的帮助！！

【参考方案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.io/lavrton/pen/VweKqrp?editors=0010

【讨论】：

您好，非常感谢您的帮助，我需要更多帮助，如何才能使此功能适用于多种形状。在这里，当使用它删除一个矩形时，它可以工作，但是当我还添加一个“添加圆圈”按钮时，它无法删除圆圈，但对矩形工作得很好。谢谢 ！！相同的演示：codepen.io/Tulsani/pen/JjGRVZK