Question

fabric.js的哪些功能可以填充图像中的颜色？

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

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

另一个疑问：如何自动调整与画布大小相同的图像？

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

要将图像调整为画布的高度和宽度，您可以执行以下操作：

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过滤器，可以修改为用另一种颜色替换白色，但这将删除所有白色而不是白色区域。

如果你的目标是看起来像儿童着色书的应用程序，你应该尝试使用svg资产并按形状着色。这意味着在将它们与应用程序一起使用之前，您必须仔细创建自己的资产。

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

1 个答案: