Fabric.js 图像剪辑无法在手机和视网膜显示器上正常工作

Question

我使用 fabric.js 构建了一个小应用程序，在移动设备上遇到了一个非常奇怪的问题。我有一个路径，我在 image.clipTo 函数中使用它来剪辑图像。它在 PC 上完美运行，但在手机上路径重复和偏移

裁剪功能代码：

img.clipTo = function(ctx) {
    this.setCoords();
    ctx.save();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    part.render(ctx);
    ctx.restore();
}

这是它在桌面上的样子： Desktop

这是它在具有相同分辨率的移动模拟器上的样子（在实际移动设备上看起来一样）： Mobile

你可以注意到左边那个重复的小矩形。如果我将图像移动到这个矩形，它会完美裁剪。

您也可以在 brmk-case-editor.herokuapp.com 上看到这个直播。要复制：单击拼贴按钮，select 任何拼贴，然后双击任何拼贴部分

Answer 1

问题在于您的移动设备的设备像素比大于 1。

织物用它作为挺括剂。

调用 ctx.setTransform(1, 0, 0, 1, 0, 0); 你正在杀死它并且你的路径在不同的位置变得更小。图像全部被剪掉了。

您需要做的是：

var retina = canvas.getRetinaScaling();
ctx.setTransform(retina, 0, 0, retina, 0, 0);

这应该有所帮助。

Fabric.js image clipTo not working correctly on mobile phones and retina displays