Question

我在Fabric.js中更改画布上的小png的颜色时遇到了麻烦。

在我的研究中，我发现我可以使用new fabric.Image.filters.Tint()以我想要的方式修改图像的颜色。但是，Fabric的v2中没有Tint()构造函数。根据{{3}}，Tint()现在是BlendColor()过滤器的一部分。我用BlendColor()尝试了各种各样的东西，但我还没有让它发挥作用。关于如何使用BlendColor()或其他过滤器来完成我想要的任何建议都非常感谢。

我最好的猜测是做这样的事情，但它不起作用：

var filter = new fabric.Image.filters.BlendColor({
 color: '#c9f364',
 mode: 'multiply'
});

canvas.getObjects()[0].filters.push(filter);
canvas.getObjects()[0].applyFilters();
canvas.renderAll();

Answer 1

将mode:'tint'设置为BlendColor过滤器。

var filter = new fabric.Image.filters.BlendColor({
  color: 'red',
  mode: 'tint',
  alpha: 0.5
});

<强> 样本

var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg',function(img){
  img.set({
   scaleX:0.3,
   scaleY:0.3
  })
  canvas.add(img);
  var filter = new fabric.Image.filters.BlendColor({
   color:'red',
   mode: 'tint',
   alpha: 0.5
  });
  img.filters.push(filter);
  img.applyFilters();
  canvas.renderAll();
},{
 crossOrigin:'null'
})

canvas{
 border:2px solid #000;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='c' width=400 height=400></canvas>

Fabric.js BlendColor图像过滤器

1 个答案: