Fabric.js：裁剪图像后的选择框

Question

在使用Fabric.js 1.7.3时，我注意到裁剪图像时出现奇怪的行为。基本上，我在图像中设置了clipTo方法，只在图像中心显示一个小方块：

然而，问题是图像的选择框仍然占用原始尺寸而不是裁剪尺寸。当点击图像时，我希望角落紧邻图片的边缘;同样，只有在我点击裁剪的图片时才会激活选择。

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

Answer 1

fabricjs中实际上没有cropTo方法。

有一个clipTo方法，其行为与您描述的一样。

裁剪不是基本的fabricjs功能。使用2.0版本可能会更容易，但是现在获得它的唯一方法是继承render方法并完全自己完成。

• 使用ctx.drawImage（this._element，sx，sy，sw，sh，dx，dy，dw，dh）公式。
• mantain你自己的作物信息由sx，sy，sw，sh
表示

Answer 2

基于AndreaBogazzi的答案，这是我完整的解决方案，我在其中覆盖了_render方法。每当我创建一个图像时，我都会添加一个“sizeMode”属性，告诉_render如何绘制它：

const drawCenterImage = function(ctx, elementToDraw, imageMargins, x, y) {
    const sx = (elementToDraw.naturalWidth - this.width) / 2;
    const sy = (elementToDraw.naturalHeight - this.height) / 2;
    ctx.drawImage(elementToDraw,
        sx,
        sy,
        imageMargins.width,
        imageMargins.height,
        x + imageMargins.marginX,
        y + imageMargins.marginY,
        imageMargins.width,
        imageMargins.height);
};

我定义的drawCenterImage函数在这里：

foreach ($response3["keywords"] as $genreObject) {
             $keywords_name = $genreObject["name"];
             $stmt->execute();
         }

虽然这适用于居中图像（就像我原来的问题一样），但对ctx.drawImage的不同调用会产生不同的效果。 Here is the documentation for the drawImage method