使用 React-Konva 删除节点上的功能错误答案

【问题标题】：Delete function bug on a node using React-Konva使用 React-Konva 删除节点上的功能错误
【发布时间】：2021-09-01 09:33:49
【问题描述】：

所以我用我最新的问题更新了我以前的 react-konva 示例代码：https://codesandbox.io/s/react-konva-drag-and-drop-image-with-delete-button-on-tranform-6977j?file=/src/Draganddrop.js

我正在尝试将删除按钮添加到选中时可见的每个图像，单击时会删除从舞台和图像数组中选择的图像，我最终将使用它来保存和加载状态。我已设法添加红色圆圈并将其用作删除按钮，但我似乎无法将其移动到每个图像的右上角或在红色圆圈的中心添加一个白色十字。

delete 函数本身会从图像数组中删除选定的图像并从舞台中删除节点，但有时似乎会从舞台中删除多个图像，即使它只从数组中删除选定的图像。我需要它来只删除从舞台上选择的那个，我目前正在使用 UseRef 来识别它，我做错了吗有没有更好的方法来确保它只删除选定的图像？

【问题讨论】：

作为对第二点的更新，我现在已经修复了它，我使用 .destroy() 从舞台上销毁节点，然后在同一个函数中从映射的数组中删除数据到图像标签，因此通过删除destroy函数，它现在只是将其从数组中删除，因此从舞台中删除。
通过对我自己的第 1 点的另一次更新，我通过使用 imageRef.current.width() 并将其乘以我通过道具传递给它的 stageScale 来固定红色圆圈的位置.这使我可以将红色圆圈移动到每张图像的右上角并停留在那里滚动滚动（缩放）仍然没有白十字，但也许有一天。

标签： reactjs konvajs react-konva konva konvajs-reactjs

【解决方案1】：

您应该重写这部分代码：

const onDeleteImage = (node) => {
    const newImages = [...images];
    newImages.splice(node.index, 1);
    setImages(newImages);
};

在处理您的状态时尽量不要使用 Konva 实例。 node.index 可能不等于该州图像的索引。因为您可能在画布上有许多元素，而不仅仅是图像（如您的示例中，您也有转换器）。它影响 Konva 索引。相反，您应该使用该州的索引；

const onDeleteImage = (index) => {
    const newImages = [...images];
    newImages.splice(index, 1);
    setImages(newImages);
};

// in jsx
{images.map((image, index) => {
  return (
    <URLImage
      onDelete={() => onDeleteImage(index)}
    />
  );
})}

【讨论】：

谢谢我没有意识到索引与转换器不同，我将更新它以确保它选择正确的索引。你有什么建议让我移动充当删除按钮的红色圆圈的最佳方式吗？中心的白色十字不太重要，但也是一个不错的触感，我尝试使用 X 道具到圆圈以将其偏移到正在选择的节点上的宽度，这在我使用舞台 onWheel 之前工作正常放大和缩小我无法让红色圆圈的位置随缩放而改变。