-1

1我必须更改活动对象图像的颜色,目前我的 T 恤颜色正在改变,但是当我在其上添加设计时,我无法更改颜色。

我的代码更改 T 恤颜色:

//setup front side canvas
canvas = new fabric.Canvas('tcanvas', {
    hoverCursor: 'pointer',
    selection: true,
    selectionBorderColor: 'blue'
});
canvas.on({
    'object:moving': function(e) {
        e.target.opacity = 0.5;
    },
    'object:modified': function(e) {
        e.target.opacity = 1;
    },
    'object:selected': onObjectSelected,
    'selection:cleared': onSelectedCleared
});
$('.color-preview').click(function(){
    var color = $(this).css("background-color");
    document.getElementById("shirtDiv").style.backgroundColor = color;
    $('.shirtDivs').css('background-color',color);
});

在这里我尝试改变设计颜色

$('#image-color').miniColors({
    change: function(hex, rgb) {
        var activeObject = canvas.getActiveObject();
        if (activeObject && activeObject.type === 'image') {
            activeObject.fill = this.value;
            canvas.renderAll();

        }
    },
    open: function(hex, rgb) {

    },
    close: function(hex, rgb) {

    }
});

演示

4

1 回答 1

5

@user3810894 - 我猜您要问的是如何更改设计的背景颜色(演示中的头像)。

在此处输入图像描述

之所以不取衬衫背景颜色,是因为头像的背景颜色是白色的,不透明。

在此处输入图像描述 代替在此处输入图像描述

如果您要拍摄这些图像并清除背景并重新保存(作为具有透明度的 PNG),那么当您覆盖它时,它将呈现衬衫的颜色。

在此处输入图像描述

如果你想改变头像的背景颜色与衬衫的颜色不同,那么你会做同样的事情——让背景透明,然后用 CSS 给它一个背景颜色(就像它在演示)

衬衫会改变“颜色”,因为它只是带有阴影的衬衫的透明图像,使用不同程度的透明度。

在此处输入图像描述

因此,从本质上讲,您也可以对您的 gravatar 图像执行此操作。

希望对某人有所帮助。

于 2014-11-20T18:43:52.293 回答