FabricJS - 模式

Question

我想知道在fabricjs中渲染图案背景图像的原因是什么？

你可以看到我提供的Fiddler例子的不同之处。

var canvas = new fabric.Canvas('paper');
const page = new fabric.Rect({
    x: 0,
    y: 0,
    width: 400,
    height: 300
});

canvas.add(page);
canvas.renderAll();

fabric.Image.fromURL($('#image').attr('src'), function(img) {
  const patternSourceCanvas = new fabric.StaticCanvas();
  
  patternSourceCanvas.enableRetinaScaling = true;
  patternSourceCanvas.imageSmoothingEnabled = false;
  patternSourceCanvas.setBackgroundImage(img, patternSourceCanvas.renderAll.bind(patternSourceCanvas));

  const pattern = new fabric.Pattern({
    source: function () {
      patternSourceCanvas.setDimensions({
        width: 400,
        height: 300
      });
      patternSourceCanvas.renderAll();
      return patternSourceCanvas.getElement();
    },
    repeat: 'no-repeat'
  });

  page.setPatternFill(pattern);
  page.canvas.renderAll();
}.bind(this),{crossOrigin: 'Anonymous'});
        
        
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<h1>Canvas Rendering</h1>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<h1>Browser Rendering</h1>

http://jsfiddle.net/redlive/y03skqcc/