时间戳

首页 > 解决方案 > 仅更改覆盖图像的颜色而不是整个画布 Fabricjs

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

问题描述

我有一块画布，上面有透明 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

标签： javascripthtmljquerycanvasfabricjs

解决方案

尝试使用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>

推荐阅读