Fabric.js BlendColor图像过滤器-Java 学习之路

我无法在Fabric.js中更改画布上的小png的颜色 .

在我的研究中，我发现我可以使用 new fabric.Image.filters.Tint() 以我想要的方式修改图像的颜色 . 但是，Fabric的v2中没有 Tint() 构造函数 . 根据this page， 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();

1 回答

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

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

DEMO

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>

回复于 2024-05-02T00:43:19+08:00

Fabric.js BlendColor图像过滤器

1 回答

相关问题