如何在 FabricJs 中添加带有图像和颜色的图案

Question

是否有添加带有图像和颜色的图案的选项？

任何时候，当我将图像应用为图案时，即使图像是透明的，Fabric 也会添加某种 "gray layer"。

var canvas = window.canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
    width: 256,
    height: 256,
    fill: 'red'
});
canvas.add(rect);
rect.center().setCoords();

fabric.util.loadImage('https://assets-cdn.github.com/images/modules/site/integrators/slackhq.png', function (img) {
    rect.setPatternFill({
        source: img,
        repeat: 'no-repeat'
    });
    canvas.renderAll();
});

有什么想法吗？

Answer 1

假设图像有透明背景，您可以将 fabric.StaticCanvas 用作 fabric.Pattern 的 source:

var imgPath = 'https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/so/so-icon.png'
var imgColor = 'grey'

var canvas = this.__canvas = new fabric.Canvas('c')


fabric.Image.fromURL(imgPath, function(img) {
  var patternSourceCanvas = new fabric.StaticCanvas()
  patternSourceCanvas.add(img)
  patternSourceCanvas.setBackgroundColor(imgColor, patternSourceCanvas.renderAll.bind(patternSourceCanvas))

  var pattern = new fabric.Pattern({
    source: function() {
      return patternSourceCanvas.getElement();
    },
    repeat: 'repeat'
  })

  // create a rectangle object
  var rect = new fabric.Rect({
    fill: pattern,
    width: 400,
    height: 400
  })

  // "add" rectangle onto canvas
  canvas.add(rect)

})

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>

<canvas id="c" width="500" height="500"></canvas>

如何在 FabricJs 中添加带有图像和颜色的图案

How to add pattern with Image and Color in FabricJs

javascript

fabricjs