Konva.js。在 Transform.js 范围内调整矩形大小

Question

默认konva-transformer use little rectangles in the middle of the border (middle-left, middle-right, top-center, bottom-center) . But i want to change resize by borders, like that

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

Answer 1

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

作为替代方案，您可以关闭角手柄（如图所示）并仅打开边缘手柄。有一个演示 here that shows all the config options for the transformer which may be of assistance, more explanation here.

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

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

解决它的方法是在所选形状周围绘制四条线（不是矩形，四个单独的线形状）并使用鼠标悬停和鼠标移开事件为您提供显示/隐藏光标的必要信息，等等

Answer 2

看例子，只需要更新Transformer中的逻辑即可class

codesandbox.io/s/he5jq?file=/src/index.js

Konva.js。在 Transform.js 范围内调整矩形大小

Konva.js. Resize rect by bounds in Transform.js

javascript

canvas

rectangles

konvajs