FabricJS。原始容器

Question

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

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

我可以使用当前的fabricjs实现类似的效果吗？

Answer 1

是的，你可以。

1. 将原始图像添加到画布并设置＆＃34; selectable＆＃34;假的
2. 创建一个croppingArea矩形并将其添加到画布中心
3. 使用croppingArea的相应left，top，width，height，scaleX，scaleY和originalImage来计算originalImage坐标中裁剪区域的边界坐标
4. 从originalImage创建一个cropedImage，其中cropX，cropY，width和height由步骤3设置