javascript - Fabric.js : selection box after cropping image

Question

在使用 Fabric.js 1.7.3 时，我注意到裁剪图像时出现奇怪的行为。本质上，我在图像中设置了 ClipTo 方法，以仅在图像中心显示一个小正方形:

但是，问题是图像的选择框仍然占据原始尺寸而不是裁剪后的尺寸。当点击图像时，我希望 Angular 点就在图片的边缘旁边；同样，只有当我单击裁剪后的图片时，才应激活选择。

对此的一个可能的解决方案是将图像的裁剪部分导出为 base64，删除旧图像并添加裁剪版本。然而，这是相当不切实际的，而且感觉有点矫枉过正。有没有一种方法可以让我简单地调整选择框以尊重裁剪后的尺寸？

Answer 1

fabricjs中实际上没有cropTo方法。

有一个 ClipTo 方法的行为如您所描述的。

裁剪还不是 Fabricjs 的基本功能。 2.0 版本可能会变得更容易，但目前获得它的唯一方法是子类化 render 方法并完全自己完成。

• 使用 ctx.drawImage(this._element, sx, sy, sw, sh, dx, dy, dw, dh) 公式。
• 维护自己的裁剪信息，用 sx、sy、sw、sh 表示