织物.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();
}

所以这就是它在桌面上的外观：桌面

这就是它在具有相同分辨率的移动模拟器上的外观(在实际移动设备上看起来相同(：移动

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

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

Answer 1

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

织物将其用作脆度增强剂。

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

你要做的是：

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

这应该会有所帮助。