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); 

這應該幫助。