Question

我使用Fabric.js在画布上绘制图像，然后在单击并移动鼠标时绘制一个矩形。

我想使用矩形裁剪图像。

当调用clipTo()函数时，我发现Fabric.js不会从指定位置剪切图像。似乎x:0, y:0实际上表示图像的中心点而不是图像的左上角。

如果我使用下面的代码，我只会获得图像的右下角。

object.clipTo = function (ctx) {
    ctx.rect(0, 0, 700, 700);
};

有谁知道如何计算正确的起点（x，y）？

Answer 1

这是因为当剪切当前变换位于对象的中心时。

要避免这种情况，请按以下步骤更改clipTo函数：

object.clipTo = function (ctx) {
     ctx.save();
     ctx.setTransform(1,0,0,1,0,0);
     ctx.rect(0, 0, 700, 700);
     ctx.restore();
};

基本上你用setTransform将画布的位置重置为＆＃34;中性＆＃34; 使用save和restore，您可以将其带回到Fabricjs所期望的位置，

这样你就可以精确地剪辑从0到700,700。

2017年3月更新

如果您正在使用devicepixelRatio大于1的屏幕（视网膜屏幕，移动设备），您可能需要不同的代码：

object.clipTo = function (ctx) {
     var retina = fabric.getRetinaScaling();
     ctx.save();
     ctx.setTransform(retina,0,0,retina,0,0);
     ctx.rect(0, 0, 700, 700);
     ctx.restore();
};

Fabric.js 1.5图片clipto

1 个答案: