首页 > 解决方案 > fabricjs画布内的svg颜色没有改变

问题描述

我正在尝试更改 fabricjs 画布内的 svg 路径填充。

在此处输入图像描述

使用这个功能

function changeColor(material) {

    console.log(svgGroup[0].fill)
    console.log(material);
    if (material == 'base') {
        svgGroup[0].fill = '#000000';
        console.log(svgGroup[0].fill)
    }
    texture.needsUpdate = true;
    object.children[0].material = textureMaterial;
    canvas.renderAll();
}

但它不会自动更新

在此处输入图像描述

有人知道为什么吗?任何想法都会有所帮助

标签: javascriptthree.jsfabricjs

解决方案


我找到了解决方案,问题是我没有正确设置颜色。而不是这样做

svgGroup[0].fill = '#000000';

它应该使用这个

svgGroup._objects.forEach(obj => {
    if (obj.id == material) {
        obj.set('fill', color);
    }
});

这样它在调用 renderAll() 时被渲染


推荐阅读