javascript - 如何使用fabricjs在图像中插入填充颜色

Question

fabric.js 的什么函数允许在图像中填充颜色？

我想加载带有黑线和白色背景的图像进行绘画。

我有一个不同颜色的输入颜色，供用户在白色部分为图像添加颜色

还有一个疑问:如何自动将图像调整为与 Canvas 大小相同？

https://jsfiddle.net/gislef/s3rvoon6/

fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.padding = 5;


  var $ = function(id){return document.getElementById(id)};


  var canvas = this.__canvas = new fabric.Canvas('c');
    canvas.setHeight(300);
        canvas.setWidth(500);

    fabric.Image.fromURL('http://coloring.thecolor.com/color/images/Fish2.gif', function(oImg) {
  canvas.add(oImg);
});

Answer 1

要将图像大小调整为 Canvas 的高度和宽度，您可以执行以下操作:

fabric.Image.fromURL('http://coloring.thecolor.com/color/images/Fish2.gif', function(oImg) {
  oImg.scaleToWidth(canvas.getWidth());
  //oImg.scaleToHeight(canvas.getHeight());
  canvas.add(oImg);
});

关于填充颜色，目前还没有类似的东西。有一个removeWhite过滤器，可以修改以用另一种颜色替换白色，但这会删除所有白色而不是白色区域。

如果您的目标是看起来像 child 涂色书的应用程序，您应该尝试使用 svg 资源并按形状为它们着色。这意味着您必须先仔细创建自己的 Assets ，然后才能在应用程序中使用它们。