如何在Fabric.js中识别画布对象颜色并调整填充透明度

你不需要逐个判断颜色值，Fabric.js内置了fabric.Color类可以直接解析并修改颜色的透明度，完美适配你的需求：

function fillColorOb() {
  const objs = canvas.getActiveObjects();
  if (!objs.length) return;

  objs.forEach(obj => {
    if (obj instanceof fabric.Path) {
      // 若需保留Path原有描边颜色并修改透明度，替换为以下代码：
      // const strokeColor = new fabric.Color(obj.stroke);
      // strokeColor.setAlpha(1);
      // obj.set('stroke', strokeColor.toRgba());
      obj.setStroke('rgba(242,0,222,1)');
    } else {
      // 解析当前填充色，将透明度改为100%
      const fillColor = new fabric.Color(obj.fill);
      fillColor.setAlpha(1);
      obj.set('fill', fillColor.toRgba());
    }
  });

  canvas.renderAll();
}

代码说明： #

• 通过fabric.Color解析对象的fill属性，支持rgba、十六进制、hsl等多种颜色格式
• 调用setAlpha(1)直接将透明度设置为100%，无需手动拼接rgba字符串
• 把canvas.renderAll()移到循环外，避免重复渲染提升性能

内容的提问来源于stack exchange，提问作者Albert Badias