グループ内のいくつかの行でバグをぼやけている

Question

Groupオブジェクトに何行か追加すると、そのようなぼかし効果が得られるのはなぜですか？

グループ内の単一の行を有するこのような動作が発生しないことに注意してください。それは、いくつかの行だけを再現するようです。

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

理由： -

ここでバグを再現するコードがあります（少しズーム、https://jsfiddle.net/90tw8mfs/と、あなたは私が話して何を参照してくださいよ、あなたは、オンラインでここでそれを試すことができますか）？どうすれば修正できますか？

Answer 1

ぼかしが表示されませんが、ぼかしがないわけではありません。あなたが高解像度のディスプレイ（MacのRetinaディスプレイ）を持っている場合、キャンバスはディスプレイの解像度の半分になるので、ぼやけてしまいます。

This answerは、高い解像度のレチナディスプレイによって引き起こされるぼやけを克服するのに役立ちます。

次の画像は、あなたのフィドルのスクリーンショットを撮ったときの画像です。ピクセルのないボケはありません

（私は合うように再編成されている注意してください）。

キャンバスを拡大すると、ぼかしが表示されます。これは、ページ上のすべてのグラフィックスに適用される双線形フィルタリングによるものです。これは画像上でうまくいくが、線のようなグラフィックスではうまくいかない。

この画像は、175％でズームプラスバイリニアフィルタリングによって引き起こさぼかしを強調するためにいくつかの余分なズームが

あなたはまた、上のCSSルールimage-rendering: pixelated;を設定することにより、バイリニアフィルタリングを防止することによって、問題を解決することができます示していフィルタリングしない要素

現在、ブラウザ間で網膜ディスプレイを検出する信頼できる方法はありません。 devicePixelRatioをチェックして値が2であることを確認できますが、網膜の表示（2つの値はありますが、ズームはありません）と200％のズームされたページを区別することはできません。

devicePixelRatioを使用すると、キャンバス解像度を物理ピクセルサイズと一致させることができますが、一部のシステムでは余分なGPU負荷がかかっているため、このピクセルをうまく処理できないことがあります。