当前位置：首页 > ds >正文

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

ds 2025/7/19 16:31:10

项目概述

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

技术栈

• HTML5 Canvas：作为绘图的基础

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

• JavaScript：实现交互逻辑

核心功能实现

初始化画布

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

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

添加座位功能

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加载座位图片

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

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

添加桌子功能

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

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++;});
}

保存布局功能

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信息，便于后续加载或存储到数据库。

复制粘贴功能

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

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