Fabricjs-new fabric.Pattern填充模板

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.transparentCorners = false


  function loadPattern(url) { //传入图片地址
    fabric.util.loadImage(url, function(img) { //加载图片
      text.set('fill', new fabric.Pattern({ //将图片设置为填充模板 文本填充
        source: img,
        repeat: document.getElementById('repeat').value //repeat repeat-x repeat-y no-repeat
      }));
      shape.set('fill', new fabric.Pattern({ //图形填充
        source: img,
        repeat: document.getElementById('repeat').value
      }));
      canvas.renderAll()
    })
  }
  var text = new fabric.Text('Honey,\nI\'m subtle', {
    fontSize: 250,
    left: 0,
    top: 0,
    lineHeight: 1,
    originX: 'left',
    fontFamily: 'Helvetica',
    fontWeight: 'bold',
    statefullCache: true,
    scaleX: 0.4,
    scaleY: 0.4
  })
  var shape = new fabric.Rect({
    width: 200,
    height: 100,
    left: 0,
    top: 300
  });
  canvas.add(text, shape)
  loadPattern('./assets/1.jpg')
  document.getElementById('patterns').onchange = function() {
    loadPattern('./assets/' + this.value) //填充不同的模板图片
  }
  document.getElementById('repeat').onchange = function() {
    text.fill.repeat = this.value //这样可以更改填充类型
    canvas.renderAll()
  }
})()