基于Fabric.js的选座布局系统开发笔记

项目概述

最近开发了一个简单的选座布局系统，主要用于会议、活动或餐厅等场景的座位和桌子布局设计。系统基于HTML5 Canvas和Fabric.js库实现，支持添加座位、桌子，并能保存布局数据。

技术栈

• HTML5 Canvas：作为绘图的基础

• Fabric.js：强大的Canvas操作库，简化了Canvas对象的创建、选择和变换

• JavaScript：实现交互逻辑

核心功能实现

1. 初始化画布

const canvas = new fabric.Canvas('seatCanvas');

使用Fabric.js创建Canvas实例，相比原生Canvas API，Fabric提供了更高级的对象模型和事件系统。

2. 添加座位功能

function addSeat() {
    fabric.Image.fromURL('seat.png', (img) => {
        img.scaleToWidth(40);
        
        const label = new fabric.Text('S' + seatCount, {
            fontSize: 12,
            originX: 'center',
            originY: 'center',
            fill: 'black',
        });

        const group = new fabric.Group([img, label], {
            left: 100,
            top: 100,
            hasRotatingPoint: true,
            lockScalingFlip: true,
            hasControls: true,
            selectable: true
        });

        canvas.add(group);
        seatCount++;
    });
}

关键点：
• 使用fabric.Image.fromURL加载座位图片

• 创建文本标签并组合成组

• 设置组的交互属性（旋转、缩放等）

3. 添加桌子功能

类似座位功能，但使用不同的图片和标签前缀：

function addTable() {
    fabric.Image.fromURL('table.png', (img) => {
        img.scaleToWidth(60);
        
        const label = new fabric.Text('T' + tableCount, {
            fontSize: 12,
            originX: 'center',
            originY: 'center',
            fill: 'black',
        });

        const group = new fabric.Group([img], {
            left: 200,
            top: 200,
            hasRotatingPoint: true,
            lockScalingFlip: true,
            hasControls: true,
            selectable: true
        });

        canvas.add(group);
        tableCount++;
    });
}

4. 保存布局功能

document.getElementById('saveBtn').addEventListener('click', () => {
    const layoutData = canvas.getObjects().map(obj => {
        return {
            id: obj._objects?.[1]?.text || '',
            left: obj.left,
            top: obj.top
        };
    });

    console.log('保存的布局：', JSON.stringify(layoutData, null, 2));
    alert('布局已输出到控制台！');
});

保存当前画布上所有对象的位置和ID信息，便于后续加载或存储到数据库。

5. 复制粘贴功能

通过监听键盘事件实现Ctrl+C/V的复制粘贴：

document.addEventListener('keydown', (event) => {
    if (event.ctrlKey && event.key === 'c') {
        // 复制逻辑...
    }

    if (event.ctrlKey && event.key === 'v') {
        // 粘贴逻辑...
    }
});

效果图

开发心得

1. Fabric.js的优势：
   • 简化了Canvas对象的创建和管理

   • 内置了丰富的交互功能（选择、旋转、缩放等）

   • 提供了便捷的分组功能

2. 遇到的挑战：
   • 图片加载的异步处理需要注意

   • 复制粘贴多个对象时需要处理对象集合

   • 保存数据时需要合理设计数据结构

3. 改进方向：
   • 添加网格对齐功能

   • 实现布局的导入/导出

   • 增加更多类型的元素（如舞台、讲台等）

   • 添加撤销/重做功能