Как применить рисунок к изображению, загруженному на холст - PullRequest
Новая
       1

Как применить рисунок к изображению, загруженному на холст

0 голосов
/ 07 февраля 2019

Как добавить рисунок к изображению, загруженному на холст.Я хочу добавить текстурированное изображение в качестве шаблона к объекту изображения, который загружается на холст без использования прямоугольника или круга в качестве объектов. Я хочу, чтобы изображение было в качестве объекта. Может кто-нибудь мне помочь. 

<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>
...