Konva.js。在 Transform.js 中按边界调整矩形大小答案

【问题标题】：Konva.js. Resize rect by bounds in Transform.jsKonva.js。在 Transform.js 中按边界调整矩形大小
【发布时间】：2022-01-12 04:28:22
【问题描述】：

默认情况下konva-transformer 在边框中间使用小矩形（左中、右中、上中、下中）。但是我想通过边框来改变大小，比如

是否有任何库可以解决我的问题或实现它的简单方法？

【问题讨论】：

【解决方案1】：

看例子，只需要更新Transformer类中的逻辑

【讨论】：

【解决方案2】：

首先，您是否考虑过这对于使用基于触摸的界面的用户来说是如何工作的，在这种情况下鼠标悬停事件没有实际可能性？

作为替代方案，您可以关闭角手柄（如图所示）并仅打开边缘手柄。有一个演示 here 显示了变压器的所有配置选项，可能会有所帮助，更多解释 here。

// set handlers on edges only.
transformer.enabledAnchors(['top-center', 'middle-right', 'middle-left',  'bottom-center',]);

为了具体回答您的问题，Konva.js 中没有任何内容可以为您执行此操作。除非其他人可以提供示例代码，否则您必须自己开发它。

接近它的方法是在所选形状周围绘制四条线（不是矩形，四个单独的线条形状），并使用 mouseover 和 mouseout 事件为您提供显示/隐藏光标等所需的信息。

【讨论】：