Konva JS 作物像变压器一样工作

Konva JS crop working like transformer

如何让 konvajs 中的 crop 像 Transformer 一样工作

我的意思是:

触发一些复选框以将其设置为裁剪
select canvas 上的项目(图像)它应该显示可以调整大小的框仅在此项目上更改位置
比点击按钮进行裁剪

我无法通过第二点休息很容易

感谢您的每一个回答

这是一个宽泛的问题,因此这里有一个宽泛的回答,重点关注每个步骤的方法。

Konva 矩形可用于指示裁剪框。它将是透明填充,绘制在图像上。 Konva Rect 形状是可拖动的,具有限制 x,y 位置的拖动功能,因此它不能被拖动到图像的边缘(即总是在图像的内部或紧靠图像的边缘,永远不会与图像重叠)边缘)。 Rect 的初始大小和形状可以符合您施加的任何限制或当前图像的大小和形状。

在裁剪框的每个角和每一边,使用其他 Konva 矩形创建手柄。每个都可以通过拖动功能进行拖动,该功能将拖动位置限制在轴和连接的边缘以及图像的边界和裁剪框的最小尺寸。拖动功能还将用于更新裁剪框 position/size 以便边缘与手柄的位置匹配。

然后您可以使用裁剪框 position/size 来确定裁剪图像的位置。

为了增加用户反馈,您还可以在裁剪框内部或外部应用滤镜,通过使用半透明矩形或滤镜之一来使裁剪的内容变暗、变亮或变暗。或者,您可以使用剪辑功能。 https://konvajs.github.io/docs/clipping/Clipping_Regions.html