如何在FabricJs中添加图案和图案图案和颜色

Question

是否有任何选项可以添加图案和图案？

任何时候，当我将图像应用为图案时，即使图像是透明的，Fabric也会添加某种“灰色图层”。

Link to Fiddler

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/stackoverflow/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>