图像上的 Fabric JS 设置填充不起作用

Question

我正在尝试使用 Fabric JS 在图像上设置填充。

为了演示我的问题，我参考了 fabricjs.com 上的 Kitchensink 演示 http://fabricjs.com/kitchensink

在下面的图像中，我尝试用绿色填充图像RGB(69,242,81)，但是当我设置颜色时，没有任何反应。这个问题有解决办法吗？

我查看了floodFilling，但不幸的是，这对我的用例来说性能太重了。

谢谢！

可能的解决方案

在玩这个演示时，我可能已经找到了一个可能的解决方案：`http://fabricjs.com/image-filters`

我选择一个对象并选择模式tint 并将alpha 增加到最大值（见下图）

我得到了想要的结果（见下图） 使用这种方法有什么问题吗？

Answer 1

Fill 目前不是图像的公认属性。造成这种情况的一个原因是，在不透明的图像后面绘制纯色会导致该颜色沿图像边缘出现。由于图像类继承了 Object 类的默认填充颜色rgb(0,0,0)（黑色），这意味着每个图像都会有这样的轮廓，除非手动将填充颜色更改为transparent。

但是，如果您确实希望您的图像尊重 fill 属性，您可以通过简单地覆盖 Image 类的 _renderFill 方法来做到这一点。只需确保将不需要背景颜色的任何图像的填充设置为transparent。

fabric.Image.prototype._renderFill = function(ctx) {
      var elementToDraw = this._element;
      if (!elementToDraw) {
        return;
      }
      var scaleX = this._filterScalingX, scaleY = this._filterScalingY,
          w = this.width, h = this.height, min = Math.min, max = Math.max,
          // crop values cannot be lesser than 0.
          cropX = max(this.cropX, 0), cropY = max(this.cropY, 0),
          elWidth = elementToDraw.naturalWidth || elementToDraw.width,
          elHeight = elementToDraw.naturalHeight || elementToDraw.height,
          sX = cropX * scaleX,
          sY = cropY * scaleY,
          // the width height cannot exceed element width/height, starting from the crop offset.
          sW = min(w * scaleX, elWidth - sX),
          sH = min(h * scaleY, elHeight - sY),
          x = -w / 2, y = -h / 2,
          maxDestW = min(w, elWidth / scaleX - cropX),
          maxDestH = min(h, elHeight / scaleY - cropY);
          
      //fill override start
      ctx.beginPath();
      ctx.rect(x, y, sW, sH);
      ctx.fill();
      //fill override end
          
      elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH);
    };