模糊的bug与一组中的几行 [英] Blurrying bug with several lines in a group

问题描述

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

请注意，在一个组中使用单一行不会导致这种行为。它似乎只能复制几行。

这里是重现错误的代码（您可以在这里在线试用 -

像素没有模糊。

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

此图显示的缩放比例为175％，再加上一些额外的缩放以突出显示由双线性过滤造成的模糊

你也可以通过防止双线性通过设置CSS规则 image-rendering：pixelated; 来过滤不希望过滤的元素。

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

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

Why does adding few more lines to the Group object results in such blurrying effect?

Note that having a single line in a group doesn't result in such behavior. It seems that it reproduces only with several lines.

Here's the code to reproduce the bug (you can try it online here -- https://jsfiddle.net/90tw8mfs/, zoom a little and you'll see what I'm talking about):

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

Why? How can I fix it?

解决方案

I do not see any blurring, but this does not mean you have no blurring. If you have a high res display (Retina display on macs) you will get blurring as the canvas will be at half the resolution of the display.

This answer will help overcome the blurring caused by high res & Retina displays.

The following image is what I see when I take a screenshot of your fiddle. (Note I have rearranged to fit)

There is no blurring of pixels.

If you zoom in on the canvas you will get some blurring. This is due to bilinear filtering that is applied to all graphics on the page. This works well on images but not so well on graphics such as lines.

This image shows zoom at 175% plus some extra zoom to highlight the blur caused by bilinear filtering

You can also fix the problem by preventing bilinear filtering by setting the CSS rule image-rendering: pixelated; on the elements you wish to not have filtering.

There is currently no reliable way to detect retina displays across browsers. You can check devicePixelRatio to see if the value is 2 but you can not differentiate between retina display (which will have a value of two but no zoom) and a page that is zoomed 200%.

You can use the devicePixelRatio to make the canvas resolution match physical pixel size, but some systems may not handle it very well because off the extra GPU load.

这篇关于模糊的bug与一组中的几行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！