织物JS。原始容器内的图像裁剪

Question

我需要裁剪功能，图像块必须是不可更改的，我在 canva.com 上看到的最好的 如果原始块 w/h!= 图像 w/h（不同的形状尺寸），用户必须能够在当前活动图像对象内移动和调整图像大小而不改变原始对象尺寸。目前我可以使用 clipTo 进行裁剪并通过动作移动它，但这并不方便。我也可以将图像绑定到矩形，但我会隐藏图像的裁剪部分......

这里需要工作演示： 在这里演示：https://www.canva.com/design/DACkUOnIfcs/dx5k5cs4uJbyscmmpzp1Pg/edit

我可以用当前的 fabricjs 实现类似的东西吗？

Answer 1

是的，你可以。

1. 将原始图像添加到画布并将“可选”设置为 false
2. 创建一个croppingArea矩形并将其添加到画布的中心
3. 使用croppingArea和originalImage各自的left、top、width、height、scaleX、scaleY计算裁剪区域在originalImage坐标中的边界坐标
4. 从 originalImage 创建一个croppedImage，其中cropX、cropY、宽度和高度由步骤3 设置