Расплывчатая ошибка с несколькими строками в группе

Question

Почему добавление нескольких строк в объект Group приводит к такому размытому эффекту?

Обратите внимание, что наличие ни одной строки в группе не приводит к такому поведению. Кажется, что он воспроизводится только с несколькими строками.

Вот код, чтобы воспроизвести ошибку (вы можете попробовать его в Интернете здесь - 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

Я не вижу размытия, но это не значит, что у вас нет размытости. Если у вас есть дисплей с высоким разрешением (отображение Retina на macs), вы получите размытие, так как холст будет в половине разрешения дисплея.

This answer поможет преодолеть размытие, вызванное высоким разрешением & Сетчатые дисплеи.

Следующее изображение - это то, что я вижу, когда снимаю скриншот вашей скрипки. (Обратите внимание, я переставил, чтобы соответствовать)

Там нет размывания пикселей.

Если вы увеличиваете масштаб на холсте, вы получите некоторое размытие. Это связано с билинейной фильтрацией, которая применяется ко всей графике на странице. Это хорошо работает на изображениях, но не так хорошо на графиках, таких как линии.

Это изображение показывает увеличение на 175% плюс некоторый дополнительный зум, чтобы выделить размытость изображения, вызванную билинейной фильтрацией

Вы также можете решить эту проблему путем предотвращения билинейной фильтрации, установив правило CSS image-rendering: pixelated; на элементы, которые вы не хотите фильтровать.

В настоящее время нет надежного способа обнаружения отображений сетчатки в браузерах. Вы можете проверить devicePixelRatio, чтобы узнать, имеет ли значение 2, но вы не можете различать отображение сетчатки (которое будет иметь значение два, но без увеличения) и страницу, увеличенную на 200%.

Вы можете использовать devicePixelRatio, чтобы разрешение холста соответствовало размеру физического пикселя, но некоторые системы могут не справиться с этим очень хорошо, потому что с дополнительной нагрузкой на графический процессор.