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

Posted 2023-03-25

【中文标题】图像上的 Fabric JS 设置填充不起作用

【英文标题】：Fabric JS setting fill on an image is not working

【发布时间】：2021-09-29 20:38:39

【问题描述】：

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

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

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

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

谢谢！

可能的解决方案

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

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

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

【参考方案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);
    ;

【讨论】：

谢谢 Melchiar 这是源代码吗？如果我想将填充应用于图像，我应该覆盖哪些部分？

也可以为这种情况提供一种模式吗？例如获取所需颜色的像素并将其作为图案应用？

我按照您的建议更改了node_modules 中的代码，但这似乎对我不起作用。我的图像对象获得了更新的fill 属性，但我没有注意到任何视觉变化。

您应该能够将此函数直接放入您的代码中而不会出现问题。自演示以来，我通过将其粘贴到厨房的控制台中对其进行了测试，并且效果很好。如果您遇到问题，请分享一个显示问题的小提琴。

啊，我明白了，我设法让它工作，但有没有办法让图像顶部的颜色，目前它只是填充图像的透明背景。我认为这可能与油漆顺序有关？