fabric.js怎么用？，有哪些功能

核心概念

fabric.js 是基于 HTML5 Canvas 的 JavaScript 库，主要提供面向对象的图形绘制与交互能力，它将原生 Canvas 的绘图操作封装为对象模型，使开发者可以像操作 DOM 一样操作图形。

• Canvas：代表画布，是所有对象的容器，支持多层渲染和事件绑定。
• Object：图形对象，包括矩形、圆形、文本、图像等，每个对象拥有独立属性（位置、尺寸、旋转、透明度等）。
• Layer：通过对象层级实现图层效果，上层对象遮挡下层对象，可通过 moveTo、sendBackwards 等方法调整顺序。
• Event：支持鼠标、触摸、键盘事件，可监听对象或画布上的交互（如点击、拖拽、缩放）。
• Serialization：支持将画布内容序列化为 JSON 字符串，也可从 JSON 恢复完整画布状态。

常用功能

绘制基本形状

文本与图像

• 文本：new fabric.Text('内容', { fontSize, fontFamily }) 或 fabric.IText（可编辑文本）。
• 图像：通过 fabric.Image.fromURL(url, callback) 或 new fabric.Image(imgElement) 加载，支持裁剪、旋转、滤镜。

自由绘制与路径

• 画笔模式：设置 canvas.isDrawingMode = true，用户可自由绘制，生成 fabric.Path 对象。
• 路径：new fabric.Path('M 0 0 L 100 100 ...')，支持 SVG 路径语法。

动画与滤镜

• 动画：使用 object.animate() 方法，支持属性过渡（如 left, top, opacity, scaleX 等），可设定持续时间、缓动函数和回调。
• 滤镜：通过 fabric.Image.filters 内置滤镜（如高斯模糊、灰度、对比度调整），应用滤镜后需调用 canvas.renderAll()。

对象组合与操作

• 组：new fabric.Group([obj1, obj2], { ... }) 组合多个对象，可整体移动、缩放、旋转。
• 子类化：通过 fabric.util.createClass 扩展原生对象，添加自定义方法或属性。
• 选择与变换：默认支持多选（Ctrl+点击）、缩放、旋转、镜像，可通过 selection、evented 等属性控制交互行为。

优点与局限

优点：

• 提供丰富的对象模型,降低 Canvas 开发复杂度。
• 内置交互操作（拖拽、旋转、缩放、选择），减少底层事件处理代码。
• 强大的序列化/反序列化功能，便于状态保存与恢复。
• 活跃的社区与完善的文档,支持多种扩展插件（如自由绘制、图形编辑器）。

局限：

• 性能在大量对象（>1000）时下降，需配合 objectCaching、renderOnAddRemove 等优化参数。
• 库体积较大（约 300 KB 压缩后），对移动端或低带宽场景不友好。
• 部分高级功能（如自定义滤镜、复杂路径动画）需要额外学习成本。

快速示例

// 创建画布 const canvas = new fabric.Canvas('c', { width: 500, height: 500 }); // 添加矩形 const rect = new fabric.Rect({ left: 100, top: 100, width: 60, height: 60, fill: 'red', rx: 10, ry: 10 }); canvas.add(rect); // 添加可编辑文本 const text = new fabric.IText('双击编辑', { left: 200, top: 200, fontSize: 20, fontFamily: 'Arial' }); canvas.add(text); // 鼠标事件监听 canvas.on('object:selected', function(e) { console.log('选中对象:', e.target); });

相关问题与解答

问题 1：fabric.js 如何实现对象拖拽时显示提示信息？

解答：通过监听 object:moving 事件，在事件回调中获取当前拖拽对象的位置，并更新一个独立 DOM 元素（如悬浮标签）的显示内容，示例：

canvas.on('object:moving', function(e) { const obj = e.target; tipElement.innerHTML = 'X: ' + Math.round(obj.left) + ', Y: ' + Math.round(obj.top); tipElement.style.left = obj.left + 50 + 'px'; tipElement.style.top = obj.top + 'px'; });

注意：需要将提示信息元素定位在画布容器之外，并设置 pointer-events: none 避免干扰鼠标事件。

问题 2：fabric.js 如何处理图像背景透明区域不触发点击？

解答：fabric.js 默认基于对象的包围盒（bounding box）检测点击，而非真实像素透明度，若希望仅点击图像非透明区域才触发事件，可设置 object.perPixelTargetFind = true，然后调用 canvas.renderAll() 使画布重新计算，示例：

const imgObject = new fabric.Image(imgElement, { left: 0, top: 0, perPixelTargetFind: true }); canvas.add(imgObject);

注意：此属性会降低性能，因为每次点击都需要遍历像素值，建议仅在小型图像或特定需求下启用。