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上看到这个。要重现：点击拼贴按钮，选择任何拼贴，然后双击任何拼贴部分

Answer 1

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

Fabric将其用作脆性增强剂。

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

你要做的是：

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

这应该有所帮助。