javascript - 为什么 FabricJS 在不同设备/浏览器上的缩放模式不同？

Question

参见Fiddle :我试图在 FabricJS 多边形上渲染背景图像，但由于某种原因，图案的比例在不同设备/浏览器上不同，没有明显的原因。

这是代码:

HTML:

<canvas id="tcanvas" width="200" height="200" />

JavaScript:

function testPattern(id) {
  var url = 'https://dummyimage.com/200x200/aff/000',
      tCanvas = new fabric.Canvas(id);

  new fabric.Image.fromURL(url, function(img) {
     var tPoints = [{
       x: 0,
       y: 0
     },
     {
       x: 0,
       y: 200
     },
     {
       x: 200,
       y: 200
     },
     {
       x: 200,
       y: 0
     }
   ];

   var tPatternWidth = 200;
   var tPatternHeight = 200;

   var tImgXScale = tPatternWidth / img.width;
   var tImgYScale = tPatternHeight / img.height;

   img.set({
     left: 0,
     top: 0,
     scaleX: tImgXScale,
     scaleY: tImgYScale
   });

   var tPatternSourceCanvas = new fabric.StaticCanvas();
   tPatternSourceCanvas.add(img);
   tPatternSourceCanvas.renderAll();

   var tPattern = new fabric.Pattern({
     offsetX: 0,
     offsetY: 0,
     source: function() {
        tPatternSourceCanvas.setDimensions({
          width: tPatternWidth,
          height: tPatternHeight
        });
        tPatternSourceCanvas.renderAll();
        return tPatternSourceCanvas.getElement();
      },
      repeat: 'no-repeat'
    });

    var tImgPoly = new fabric.Polygon(tPoints, {
      left: 100,
      top: 100,
      originX: 'center',
      originY: 'center',
      fill: tPattern,
      objectCaching: false,
      selectable: false,
      stroke: 'red',
      strokeWidth: 1
    });

    tCanvas.add(tImgPoly);
    tCanvas.renderAll();
  });
}

testPattern('tcanvas');

这是我在桌面 Chrome 上看到的内容:

...这是我在(三星)平板电脑 Chrome 上看到的内容:

如何修复代码以使两种模式看起来相同，即像第一个模式一样？

Answer 1

这是视网膜支持的副作用。

初始化模式的 Canvas 时，请作为选项传递:

enableRetinaScaling: false

var tPatternSourceCanvas = new fabric.StaticCanvas(null, {enableRetinaScaling: false});

这将避免布料尝试两次增强 Canvas 。