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

时间:2018-05-29 12:19:43

标签: jquery canvas konvajs

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

我的意思是:

触发一些复选框以将其设置在裁剪上 在画布上选择项目(图像)它应该显示可以仅在此项目上调整更改位置的框 而不是单击按钮使作物

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

感谢每一个答案

1 个答案:

答案 0 :(得分:0)

这是一个广泛的问题,所以这里有一个广泛的回应,侧重于每个步骤的方法。

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

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

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

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