模糊组中多行的错误

Question

为什么在Group对象中添加更多行会导致这种模糊效果？

请注意，在组中使用单行不会导致此类行为。它似乎只用几行重现。

以下是重现该错误的代码（您可以在此处在线试用 - https://jsfiddle.net/90tw8mfs/，缩放一点，然后您就会看到我正在谈论的内容）<\ n / p>

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将有助于克服高分辨率和高分辨率造成的模糊Retina显示。

以下图片是我拍摄小提琴屏幕截图时看到的图片。 （注意我已重新安排以适应）

没有像素模糊。

如果你放大画布，你会得到一些模糊。这是由于双线性过滤应用于页面上的所有图形。这适用于图像，但在线条等图形上效果不佳。

此图像显示175％的变焦加上一些额外的变焦以突出显示由双线性过滤引起的模糊

您还可以通过在您希望不进行过滤的元素上设置CSS规则image-rendering: pixelated;来阻止双线性过滤来解决问题。

目前还没有可靠的方法来检测浏览器中的视网膜显示。您可以检查devicePixelRatio以查看该值是否为2但您无法区分视网膜显示（其值为2但没有缩放）和缩放200％的页面。

您可以使用devicePixelRatio使画布分辨率与物理像素大小相匹配，但某些系统可能无法很好地处理它，因为需要额外的GPU负载。