仅更改覆盖图像的颜色而不是整个画布 Fabricjs

Posted 2023-05-08

【中文标题】仅更改覆盖图像的颜色而不是整个画布 Fabricjs

【英文标题】：Change color of overlayimage only instead of the whole canvas Fabricjs

【发布时间】：2020-10-19 01:55:53

【问题描述】：

我有一个画布，上面有透明 T 恤的背景图像。现在我想动态改变 t 恤的颜色，为了做到这一点，可以改变画布背景的颜色，衬衫会适应它。我的画布大约是 920 宽和 570 高，背景图像是 530 宽和 630 高，它位于画布的中心

现在我只想改变图像背景的颜色，使画布的额外条不着色

我得到的结果

我想要的结果

我尝试过使用 fabricjs 库的 overlaycolor 图像，但它们都不适合我。我试图在 Fabric 库的 setBackgroungColor 中给出 left:190，但这也不起作用。

感谢您对此事的任何帮助

<div id="shirtDiv">
                    <canvas id="tcanvas"></canvas>
</div>


<script>
var canvas;
    var canvas = new fabric.Canvas('tcanvas',backgroundColor:'red', floodColor:'red');
    canvas.setHeight(570);
    canvas.setWidth(926);
    canvas.setOverlayImage('https://lh3.googleusercontent.com/proxy/m96GqS_oGOQQPt4TMfxYQtrFfdRN6IcgkMQ-y4t_9DVDpSLsGv-2PXdX_NvjP1ljsgw680RuzZBiURQgzPSnWxmX1hU',canvas.renderAll.bind(canvas),
        top:25,
        left:190
    );
    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>

这里是代码：jsfiddle

【参考方案1】：

尝试使用fabric.Image.backgroundColor。 将在对图像进行平移之前绘制颜色（或渐变）的图像区域。

var canvas;
    var canvas = new fabric.Canvas('tcanvas');
    canvas.setHeight(570);
    canvas.setWidth(926);
    canvas.setOverlayImage('http://fabricjs.com/assets/printio.png', function() 
  canvas.requestRenderAll();
  canvas.overlayImage.backgroundColor = 'red';
, 
        top:25,
        left:190
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<div id="shirtDiv">
                    <canvas id="tcanvas"></canvas>
</div>

【讨论】：

你的回答是正确的，谢谢你，但我有另一个问题，现在我的画布有对象，我正在使用这件衬衫图像的透明度来查看衬衫内的对象和 DIV 的背景颜色（旧方法）z-index 很低，所以现在在应用overlayImage.backgroundColor 之后，对象不会显示在覆盖的图像上。有没有办法我可以调整画布的backgroundImage 颜色或使对象z-index 高于叠加图像颜色 但低于实际图像。抱歉给您添麻烦

如何为画布使用 backgroundImage 作为红色矩形，与您将放置的透明 T 恤相同大小作为 overlayImage，并在中间放置您想要的内容？就像一个三明治，底层是红色，顶层是 T 恤，其余的都在中间。

我昨天已经尝试过这个解决方案，但没想到将 rect 设置为 backgroundimage 是可能的，反正我没有想太多，我这样做了，它就像一个魅力，非常感谢你