你如何从“mouseout”事件的图像中分离 konva 变压器？答案

【问题标题】：How do you detach the konva transformer from an image on "mouseout" event?你如何从“mouseout”事件的图像中分离 konva 变压器？
【发布时间】：2021-06-17 21:44:05
【问题描述】：

我正在想办法从我的图像中分离 Konva.js 转换器。

我已经使用 "mouseover" 事件成功地创建了转换器并将其附加到图像上，但我不知道如何使用我的 "mouseout" 转换完成后的事件。我发现的大多数文档和示例都建议使用 tr.detach() 方法，我尝试过但没有成功。

谁能建议一种替代方法或查看我的代码并让我知道我缺少什么？

这是一个演示链接，您可以查看代码并了解我遇到的问题： https://codesandbox.io/s/intelligent-cohen-2f38i?file=/index.html

【问题讨论】：

标签： javascript konvajs konva

【解决方案1】：

注意：您可能需要重新考虑使用 attachTo() 命令。 konvajs.org/api/Konva.Transformer.html 上的 Konva 文档说 attachTo() '此方法已被弃用，将很快被删除'。

Transformer 具有 nodes[] 数组，您可以将想要连接变压器的形状推入其中。在您的情况下，听起来您一次在一个节点上显示变压器 - 该数组允许您添加多个形状，下次您会发现这些形状很有用。比如……

// get
const nodes = transformer.nodes();

// set
transformer.nodes([rect, circle]);

要从转换器中“移除”一个节点，您需要将其从transformer.nodes 列表中移除。如果你想清除变压器并且你只有一个形状，那么给它一个空数组。

transformer.nodes([]);

会为你做的。

【讨论】：

您好，感谢您提供此解决方案！实际上，我最终只是在我的事件之外创建了转换器，然后使用事件侦听器来附加和分离节点，这看起来与您正在做的类似，但使用的是 attachTo 和 detach 方法。
您可能需要重新考虑，konvajs.org/api/Konva.Transformer.html 的 Konva 文档说 attachTo() '此方法已被弃用，很快将被删除。'
非常好的一点，我没有考虑过。我已经编辑了我的代码以反映您的建议，它就像一个魅力！
如果我的回答是正确的，请点击勾号将其标记为好。我对其进行了编辑以包含有关弃用的注释。