Question

如何向画布中加载的图像添加图案。我想添加一个纹理图像作为加载到其中的图像对象的图案画布，不使用rect或circle作为对象。我希望图像像一个物体。有人可以帮我吗。

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
</head>

<body>
  <button id="pattern">Pattern</button>
 <canvas id="c" width=500 height=500></canvas>
</body>
</html>
<script>
  var canvas = new fabric.Canvas('c');
  fabric.Image.fromURL('driver.png', function (img) {
    let scale = 300 / img.width;
    img.set({
      scaleX: scale,
      scaleY: scale
    });
    canvas.add(img);
    loadPattern('http://i0.wp.com/www.illustratoring.com/wp-content/uploads/2012/12/chevron-pattern-illustrator.png?resize=40%2C40', img);
  });
  function loadPattern(url, obj) {
    console.log(url, obj);
    fabric.util.loadImage(url, function (img) {
      obj.setPatternFill({
        source: img,
        repeat: 'repeat'
      });
      canvas.renderAll();
    });
  }
</script>

如何将图案应用于画布中加载的图像

0 个答案: