Fabric.js 实现图形拖拽缩放旋转实战技巧

Fabric.js 实现图形拖拽缩放旋转实战技巧

为什么选择 Fabric.js

第一次接到要在网页里做交互式图形编辑器的需求时，往往意味着要从零开始写拖拽逻辑、旋转算法和鼠标事件。原生 Canvas API 虽然强大，但处理交互需要大量代码：监听事件、计算偏移量、维护图形列表、碰撞检测等。

Fabric.js 是一个成熟的库，为 Canvas 提供了对象模型。它简化了图形管理，每个元素都是对象，拥有 left、top、angle、scaleX 等属性，无需手动重绘整个画布。

原生 Canvas 与 Fabric.js 对比

原生实现基础拖拽需要维护状态和重绘逻辑：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let isDragging = false;
let dragTarget = null;
let shapes = [
  { x: 50, y: 50, width: 100, height: 100, color: 'red' }
];

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  shapes.forEach(shape => {
    ctx.fillStyle = shape.color;
    ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
  });
}

而使用 Fabric.js，只需几行核心代码：

const canvas = new fabric.Canvas('c', {
  width: 800,
  height: 600,
  backgroundColor: '#f5f5f5'
});

const rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 200,
  height: 200,
  angle: 0,
  stroke: 'black',
  strokeWidth: 2,
  selectable: true,
  hasControls: true,
  hasBorders: true
});
canvas.add(rect);
canvas.renderAll();

初始化画布与基础操作

假设 HTML 中有 <canvas id="c"></canvas>，以下代码可直接运行：

const canvas = new fabric.Canvas('c', {
  width: window.innerWidth - 50,
  height: window.innerHeight - 100,
  backgroundColor: '#e0e0e0',
  selection: true,
  preserveObjectStacking: true
});

// 创建组合对象（Group）
const circle = new fabric.Circle({ radius: 50, fill: 'yellow', stroke: 'orange', strokeWidth: 3, left: 100, top: 100 });
const faceGroup = new fabric.Group([circle], {
  left: 100,
  top: 100,
  cornerColor: 'cyan',
  transparentCorners: false
});
canvas.add(faceGroup);

// 添加可编辑文字
const text = new fabric.Text('双击编辑我', {
  left: 300,
  top: 200,
  fontFamily: 'Arial',
  fontSize: 30,
  editable: true
});
canvas.add(text);

// 监听事件
canvas.on('object:moving', (e) => {
  console.log(`物体移动到：(${e.target.left.toFixed(1)}, ${e.target.top.toFixed(1)})`);
});

Fabric 内置支持鼠标拖拽移动、边角缩放、旋转（按住 Shift 可 15 度一格精准旋转）、多选及文字编辑。

高级交互控制

画布平移（Pan）

Fabric 默认没有内置画布平移，通常通过空格键或 Alt 键触发：

let isPanning = false;
let lastPosX, lastPosY;

window.addEventListener('keydown', (e) => {
  if (e.code === 'Space') {
    canvas.defaultCursor = 'grab';
    canvas.selection = false;
    canvas.forEachObject((obj) => { obj.selectable = false; });
  }
});

window.addEventListener('keyup', (e) => {
  if (e.code === 'Space') {
    canvas.defaultCursor = 'default';
    canvas.selection = true;
    canvas.forEachObject((obj) => { obj.selectable = true; });
  }
});

canvas.on('mouse:down', (opt) => {
  const evt = opt.e;
  if (evt.altKey || evt.code === 'Space') {
    isPanning = true;
    lastPosX = evt.clientX;
    lastPosY = evt.clientY;
    canvas.defaultCursor = 'grabbing';
  }
});

canvas.on('mouse:move', (opt) => {
  if (isPanning && opt.e) {
    const vpt = canvas.viewportTransform;
    vpt[4] += opt.e.clientX - lastPosX;
    vpt[5] += opt.e.clientY - lastPosY;
    canvas.requestRenderAll();
    lastPosX = opt.e.clientX;
    lastPosY = opt.e.clientY;
  }
});

canvas.on('mouse:up', () => { isPanning = false; canvas.defaultCursor = 'default'; });

自定义控制点与吸附

可以自定义旋转吸附角度或显示实时尺寸：

canvas.on('object:rotating', (e) => {
  const obj = e.target;
  let angle = obj.angle % 360;
  if (angle < 0) angle += 360;
  const snapAngle = 15;
  const remainder = angle % snapAngle;
  if (remainder < 2 || snapAngle - remainder < 2) {
    obj.angle = angle - remainder;
  }
});

常见坑点与解决方案

1. 坐标系统与旋转偏移

Fabric 的 left 和 top 是物体未旋转时的左上角坐标。旋转后边界框变化，保存数据时建议保存原始属性：

function serializeObject(obj) {
  return {
    type: obj.type,
    left: obj.left,
    top: obj.top,
    width: obj.width,
    height: obj.height,
    scaleX: obj.scaleX,
    scaleY: obj.scaleY,
    angle: obj.angle,
    originX: obj.originX,
    originY: obj.originY
  };
}

加载时使用 fromObject 确保坐标系正确。

2. 控制点位置错乱

检查 centeredScaling 属性。默认为 false（对角缩放），设为 true 则为中心缩放。

fabric.Object.prototype.set({
  centeredScaling: false,
  centeredRotation: true,
  padding: 5
});

3. Group 内部坐标混乱

子元素在 Group 中的坐标是相对于 Group 中心的。打散前需转换绝对坐标：

function ungroup(group) {
  const items = group.getObjects();
  group.destroy();
  items.forEach(item => {
    const matrix = group.calcTransformMatrix();
    const newCenter = fabric.util.transformPoint(new fabric.Point(item.left, item.top), matrix);
    item.set({
      left: newCenter.x,
      top: newCenter.y,
      angle: item.angle + group.angle,
      group: null
    });
    canvas.add(item);
  });
}

4. 导出图片模糊

高 DPI 屏幕下导出需设置 multiplier：

function exportHighResImage() {
  const dataURL = canvas.toDataURL({
    format: 'png',
    quality: 1,
    multiplier: 2
  });
  // 下载逻辑...
}

性能优化

1. 对象缓存

开启对象缓存以减少重绘开销：

fabric.Object.prototype.objectCaching = true;
fabric.Object.prototype.statefullCache = false;

对于静态背景元素，禁用事件监听：

backgroundObjects.forEach(obj => {
  obj.selectable = false;
  obj.evented = false;
  obj.objectCaching = true;
});

2. 批量渲染

关闭自动渲染，手动控制时机：

canvas.renderOnAddRemove = false;
// 操作完成后调用
canvas.requestRenderAll();

3. 清理对象

移除对象时需释放资源防止内存泄漏：

obj.off();
canvas.remove(obj);
obj.dispose();

实用开发技巧

撤销重做

利用历史记录功能：

const history = [];
let historyIndex = -1;

function saveState() {
  const json = JSON.stringify(canvas.toJSON());
  history.push(json);
  historyIndex++;
}

canvas.on('object:modified', saveState);

SVG 导入导出

// 导入
fabric.loadSVGFromString(svgString, (objects, options) => {
  const obj = fabric.util.groupSVGElements(objects, options);
  canvas.add(obj).renderAll();
});

// 导出
const svgData = canvas.toSVG();

滤镜与动画

Fabric 内置滤镜系统和动画接口，无需额外引入 WebGL 或动画库。

移动端适配

移动端需注意触摸事件冲突，设置 meta 标签禁止页面缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Retina 屏下确保启用 enableRetinaScaling。

调试技巧

将实例挂载到 window 方便控制台调试：

window.canvas = canvas;

开启边界框显示辅助定位：

canvas.on('after:render', () => {
  canvas.contextContainer.strokeStyle = 'red';
  canvas.forEachObject(obj => {
    const bound = obj.getBoundingRect();
    canvas.contextContainer.strokeRect(bound.left, bound.top, bound.width, bound.height);
  });
});

总结

Fabric.js 极大简化了前端图形编辑器的开发，省去了底层矩阵变换和事件系统的编写。但需注意其对象模型特性、性能限制及移动端兼容性问题。结合原生 Canvas 知识，能更有效地排查问题并优化体验。