在一組中有多行模糊bug

Question

爲什麼向Group對象添加更多行會導致如此模糊的效果？

注意，在組中具有單個線不會導致這樣的行爲。它似乎只用幾行重現。

這裏重現bug的代碼（你可以在這裏在線嘗試 - https://jsfiddle.net/90tw8mfs/，放大一點，你就會明白我說的）：

var canvas = new fabric.Canvas('c'); 

function addFirstGroup() { 
    var firstLine = new fabric.Line([0, 0, 0, 100], { 
    strokeLineCap: 'round', 
    strokeWidth: 2, 
    stroke: '#070B7D' 
    }); 
    var group = new fabric.Group([firstLine], { 
    left: 100, 
    top: 100 
    }); 
    canvas.add(group); 
} 

function addSecondGroup() { 
    var firstLine = new fabric.Line([0, 0, 0, 100], { 
    strokeLineCap: 'round', 
    strokeWidth: 2, 
    stroke: '#070B7D' 
    }); 
    var secondLine = new fabric.Line([0, 100, 100, 100], { 
    strokeLineCap: 'round', 
    strokeWidth: 2, 
    stroke: '#070B7D' 
    }); 
    var thirdLine = new fabric.Line([100, 100, 100, 0], { 
    strokeLineCap: 'round', 
    strokeWidth: 2, 
    stroke: '#070B7D' 
    }); 
    var group = new fabric.Group([firstLine, secondLine, thirdLine], { 
    left: 100, 
    top: 300 
    }); 
    canvas.add(group); 
} 

addFirstGroup(); 
addSecondGroup(); 

$('#canvas-wrapper').mousewheel(function(e) { 
    if (e.originalEvent.deltaY < 0) { 
    var newZoom = canvas.getZoom() + 0.1; 
    } else { 
    var newZoom = canvas.getZoom() - 0.1; 
    } 
    canvas.setZoom(newZoom); 
}); 

爲什麼？我該如何解決它？

Answer 1

我沒有看到任何模糊，但這並不意味着你沒有模糊。如果您的高分辨率顯示器（Mac上的Retina顯示器），則畫布將以顯示器分辨率的一半進行模糊處理。

This answer將有助於克服高分辨率造成的模糊&視網膜顯示。

以下圖片是我在看到小提琴的截圖時看到的圖片。 （注意：我已經重新安排，以適應）

沒有像素的模糊。

如果放大畫布，您會看到一些模糊的圖像。這是由於應用於頁面上所有圖形的雙線性過濾。這適用於圖像，但對線條等圖形不太好。

此圖像顯示變焦的175％，再加上一些額外的變焦突出造成的雙線性過濾模糊

您也可以通過設置CSS規則image-rendering: pixelated;在防止雙線性過濾解決問題您不希望過濾的元素。

目前沒有可靠的方法來檢測跨瀏覽器的視網膜顯示。您可以檢查devicePixelRatio以查看該值是否爲2，但無法區分視網膜顯示（其值爲2但無縮放）和放大200％的頁面。

您可以使用devicePixelRatio使畫布分辨率與物理像素大小匹配，但某些系統可能無法很好地處理它，因爲沒有額外的GPU負載。