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

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

初始化Pattern的画布时，请作为选项传递：

enableRetinaScaling: false

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

这样可以避免布料尝试两次增强画布。

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

1 个答案: