Fabric.js单选按钮无法切换画布对象颜色的技术问题求助

嘿，我看了你的代码，问题其实出在几个关键的地方，导致颜色切换没效果，而且逻辑冗余得很。咱们一步步理清楚：

问题根源 #

1. 重复初始化Canvas：每次点击单选按钮都调用new fabric.Canvas('c')，这会直接重置整个画布，包括之前的事件监听和已添加的元素，多次实例化还会导致状态冲突，后续操作其实都在混乱的状态下执行。
2. 事件重复绑定：每次点击单选按钮都给Canvas绑定一遍mouse:move、mouse:out、mouse:up事件，导致同一个事件有多个回调在跑，干扰了正确的逻辑。
3. 没有统一维护颜色状态：你把不同颜色的图形逻辑拆成三个分支，每个分支都重复写了几乎一样的代码，而且没有全局变量记录当前选中的颜色，导致新添加的图形没法对应上最新选择的颜色。

修复后的完整代码 #

直接用下面的代码就能解决问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
Green<input name="iconType" type="radio" id="green" checked onclick="updateCurrentColor('green')" />
Yellow <input name="iconType" type="radio" id="yellow" onclick="updateCurrentColor('yellow')" />
Red <input name="iconType" type="radio" id="red" onclick="updateCurrentColor('red')" />
<canvas id="c" width="600" height="600"></canvas>

<style>
canvas {
  border: 1px solid #ccc;
}
</style>

<script>
// 全局初始化Canvas，只执行一次
const canvas = new fabric.Canvas('c');
// 维护当前选中的颜色，默认绿色
let currentColor = 'green';
// 跟随鼠标的预览三角形
let previewTriangle = null;

// 初始化预览图形
function initPreview() {
  previewTriangle = new fabric.Triangle({
    width: 62.5,
    height: 50,
    originX: 'center',
    originY: 'center',
    fill: currentColor,
    // 预览图形不可选中、不可交互，避免干扰其他元素
    selectable: false,
    evented: false
  });
  canvas.add(previewTriangle);
  // 初始状态隐藏预览图形
  hidePreview();
}

// 隐藏预览图形
function hidePreview() {
  previewTriangle.top = -100;
  previewTriangle.left = -100;
  canvas.renderAll();
}

// 更新当前选中的颜色，并同步预览图形的颜色
function updateCurrentColor(color) {
  currentColor = color;
  if (previewTriangle) {
    previewTriangle.set('fill', color);
    canvas.renderAll();
  }
}

// 绑定Canvas事件，只执行一次
canvas.on('mouse:move', function(obj) {
  if (!previewTriangle) return;
  // 让预览图形跟随鼠标移动
  previewTriangle.top = obj.e.y - 30;
  previewTriangle.left = obj.e.x - 10;
  canvas.renderAll();
});

canvas.on('mouse:out', function() {
  hidePreview();
});

canvas.on('mouse:up', function() {
  if (!previewTriangle) return;
  // 克隆预览图形并添加到画布
  const newTriangle = previewTriangle.clone();
  // 克隆后的图形恢复可选中状态，方便后续操作
  newTriangle.set({
    selectable: true,
    evented: true
  });
  canvas.add(newTriangle);
  // 隐藏预览图形
  hidePreview();
});

// 页面加载完成后初始化预览图形
window.onload = initPreview;
</script>

关键改动点 #

• 全局Canvas实例：把Canvas初始化放在全局，只执行一次，避免每次切换颜色都重置画布。
• 统一颜色状态：用currentColor变量记录当前选中的颜色，单选按钮的点击事件只负责更新这个变量和预览图形的颜色。
• 单一预览图形：只创建一个跟随鼠标的预览三角形，切换颜色时直接更新它的fill属性，不用每次都创建新的图形对象。
• 事件只绑定一次：所有Canvas的事件监听都只绑定一次，避免重复回调导致的逻辑混乱。
• 预览图形优化：给预览图形设置selectable: false和evented: false，避免干扰画布上其他元素的交互，克隆后的图形再恢复可选中状态。

这样修改后，点击不同的单选按钮，再点击画布添加的三角形就会是对应的颜色了，代码也简洁了很多，逻辑更清晰。

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