Fabric.js image clipTo在手机和视网膜显示器上无法正常工作

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

的问题在于，你的移动设备具有一个设备像素比greather比1

面料使用它作为事实脆皮增强剂。

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

你所要做的是：

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

这应该帮助。