如何在Fabric.js画布中创建同尺寸不同颜色的三个图形？

核心修改方向 #

• 调整HTML的.box区域，添加对应图形的触发按钮
• 重构JS图形创建逻辑，用统一函数接收类型和颜色参数
• 简化switch分支，调用统一创建函数实现不同颜色图形生成

修改后的完整代码 #

HTML（仅修改.box区域） #

<div class="box">
  <button onclick="addShape('rect', '#ff4444')">红色矩形</button>
  <button onclick="addShape('circle', '#44dd44')">绿色圆形</button>
  <button onclick="addShape('triangle', '#4444ff')">蓝色三角形</button>
</div>
<canvas id="canvas" width="600" height="400"></canvas>

JS（修改switch分支及图形创建函数） #

const canvas = new fabric.Canvas('canvas');
// 统一尺寸配置
const baseSize = { width: 120, height: 120 };

// 统一图形创建函数
function makeShape(type, fillColor) {
  let shape;
  switch(type) {
    case 'rect':
      shape = new fabric.Rect({
        width: baseSize.width,
        height: baseSize.height,
        fill: fillColor,
        left: 80,
        top: 80
      });
      break;
    case 'circle':
      shape = new fabric.Circle({
        radius: baseSize.width / 2, // 保证和矩形视觉尺寸一致
        fill: fillColor,
        left: 80,
        top: 80
      });
      break;
    case 'triangle':
      shape = new fabric.Triangle({
        width: baseSize.width,
        height: baseSize.height,
        fill: fillColor,
        left: 80,
        top: 80
      });
      break;
  }
  return shape;
}

// 添加图形到画布
function addShape(type, color) {
  const newShape = makeShape(type, color);
  canvas.add(newShape);
}

关键说明 #

• 用baseSize统一管理尺寸，确保三个图形视觉大小匹配
• makeShape函数通过参数区分图形类型和颜色，避免重复代码
• HTML按钮直接传递类型和颜色参数，逻辑清晰易维护

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