如何在 "mouseout" 事件中将 konva 转换器从图像中分离出来？

Question

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

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

任何人都可以建议替代方法或查看我的代码并让我知道我缺少什么吗？

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

Answer 1

注意：您可能需要重新考虑使用 attachTo() 命令。 konvajs.org/api/Konva.Transformer.html 的 Konva 文档说 attachTo() 是 'This method is deprecated and will be removed soon'.

Transformer 有 nodes[] 数组，您可以将要附加转换器的形状推入其中。在你的情况下，听起来你一次在一个节点上显示变压器 - 该数组允许你添加多个形状，你会发现下次有用。例如...

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

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

要'remove' transformer 中的一个节点，您需要将其从transformer.nodes 列表中删除。如果你想清除变压器，而你只有一个形状，那么给它一个空数组。

transformer.nodes([]); 

会为你做的。