Fabric.js从入门学习到实现labelImg矩形多边形标注工具【上】
Fabric.js从入门学习到精通使用
最近，我在CSDN上的博客更新暂停了一段时间，主要是因为工作中遇到了一个中等复杂度的需求——开发一款前端较为头疼的canvas标注工具。经过两周半的努力迭代和细致打磨，终于完成了一个可使用的版本，类似于网页版的LabelImg标注编辑器。这个过程虽然充满挑战，但最终取得了不错的成果。
首先收集产品的需求，了解探讨需求后，进入实现阶段，一开始使用原生canvas实现了一个简单的可修改编辑的矩形标注demo，发现极为复杂且充满BUG，果断放弃，原生Canvas标注直通车>>>>，通过资料查阅参考别人源码发现Fabric.js开源库是个不错的选择，果断选择了这款开源库，经过两天Fabric.js的学习，开始进行标注工具的功能实现。以下是Fabric.js的学习记录。
以下知识也是我做标注工具项目的时候用到的，更详细的对象方法属性说明还请去官网查阅。
前言
前端开发中，大大小小的需求，其中有很多关于canvas的需求，只要听到canvas的需求就非常头疼，因为这通常意味着需要使用原生JavaScript去监听鼠标的多种事件，并以此来实现各种各样复杂的功能，整个过程相当繁琐很是头大。接下来介绍一个canvas的工具库，fabric.js工具，轻轻松松实现各种canvas的复杂的需求功能，大大提高前端开发者面对canvas需求的开发效率和体验。
FUCK！文档真难读啊！
Fabric.js介绍
Fabric.js 是一个强大灵活的 HTML5 画布（canvas）库，它提供了对象模型和丰富的 API 来简化基于 canvas 的开发。可以轻松地在网页上绘制图形，还能处理复杂的交互，如拖拽、缩放、旋转等。
Fabric.js官网直通车>>>>
需求场景
- 绘图应用：
Fabric.js可以用来创建在线绘图工具，支持用户进行自由绘图、选择颜色、调整线条粗细等功能。- 图像编辑器：利用其对图像的支持，可以构建图像编辑器，支持添加滤镜、裁剪、调整大小等操作。
- 数据可视化：对于需要展示复杂数据关系的应用，
Fabric.js提供了绘制各种图表的能力，并且能够与用户进行交互。- 游戏开发：简单的二维游戏可以通过
Fabric.js快速实现，包括角色移动、碰撞检测等功能。- 可视化标注工具：人工智能时代，很多训练数据需要人工通过标注工具进行数据投喂给模型，也可以使用Fabric.js进行标注工具的建设。
使用案例【标注案例实现效果】
学习以下知识可以简单的完成如下效果【拖拽矩形框标注，多边形标注，十字辅助线，上一张，下一张，放大，缩小，还原(自适应窗口)，导出数据，矩形的修改，多边形的修改，及其标注的删除，标注的回显】等功能，可自行扩展功能。
矩形标注：
多边形标注：
导出数据格式：
矩形标注
多边形标注工具web端
入门
一、引入 Fabric.js
首先你需要在项目中引入Fabric.js库。可以通过下载文件并在 HTML 中引用，或者使用 npm 或 yarn 进行安装。
npm install fabric
或者
yarn add fabric
二、组件中引入fabric.js
import { Canvas, Rect } from "fabric";
三、初始化 Canvas
使用 new Canvas('canvasId|canvasRef') 初始化你的canvas 元素。
<template><div style="padding: 20px"><canvaswidth="500"height="500"ref="canvasContainer"style="border: 1px solid rgba(69, 154, 235, 0.55)"></canvas></div>
</template>
<script lang="ts" setup name="FabricDemo">
import { defineComponent, onMounted, ref } from "vue";
import { Canvas} from "fabric";
const canvasContainer = ref(null);
let canvas = null;
onMounted(() => {canvas = new Canvas(canvasContainer.value, {width: 800,height: 600,});
});
</script>
<style scoped lang="scss"></style>
四、创建对象
使用 Fabric.js 提供的方法创建图形对象，例如矩形 (Rect)、圆形 (Circle)、文本 (Text) 等。
onMounted(() => {canvas = new Canvas(canvasContainer.value, {width: 800,height: 600,});const rect = new Rect({left: 100,top: 100,fill: "green",width: 200,height: 100,});canvas.add(rect);
});
五、操作对象
通过设置对象的属性（如位置、大小、颜色等）和调用相关方法（如 rotate, scale 等）来操作这些对象，通过canvas.add(rect)添加到canvas画布中。
const rect = new Rect({left: 100,top: 100,fill: "green",width: 200,height: 100,});rect.rotate(45); // 旋转rect.scale(1.5); // 缩放rect.set({ fill: "red" });canvas.add(rect);
六、事件监听
使用 .on('event', callback) 方法为对象绑定事件监听器，比如鼠标点击、移动等，实现交互效果。【对象的事件监听在开发中很重要很重要】有两种事件，分别为对象级事件和画布级事件。
-
画布级事件
事件名称 事件描述 "object:added"当对象被添加到画布上时触发。 "object:modified"当画布上的对象属性被修改后触发。 "object:removed"当对象从画布中移除时触发。 "object:moving"当对象正在移动时连续触发。 "object:scaling"当对象正在缩放时连续触发。 "object:selected"当对象被选中时触发。 "selection:created"当一个新的选择集被创建时触发。 "selection:updated"当当前的选择集更新时触发。 "selection:cleared"当选择集被清除时触发。 "path:created"当一个路径通过自由绘制工具创建时触发。 -
对象级事件
事件名称 事件描述 "moving"对象移动时触发。 "selected"对象被选中时触发。 "modified"对象尺寸或位置被修改后触发。 "scaling"对象缩放时触发。 "rotating"对象旋转时触发。 "mousedown"、"mouseup"、"mousemove"、"mouseover"、"mouseout"类似于 DOM 事件，当用户与对象交互时触发。
const rect = new Rect({left: 100,top: 100,fill: "green",width: 200,height: 100,});rect.rotate(45); // 旋转rect.scale(1.5); // 缩放rect.set({ fill: "red" });rect.on("mousedown", function () {console.log("鼠标按下");});rect.on("mouseover", function () {console.log("鼠标移入");});rect.on("mouseout", function () {console.log("鼠标移出");});canvas.add(rect);
七、图层管理
Fabric.js 支持多层图形管理，可以创建多个图层，并在图层之间进行切换和操作，可以在复杂的图形应用中更好的管理和控制图形对象。
创建了一个红色半透明的矩形作为底层，接着添加了一个绿色的圆形位于矩形之上，最后在画布上添加了一段文字。通过调用canvas.sendToBack(text)，我们可以改变文字对象的堆叠顺序，使其成为最底层的对象之一。
<script lang="ts" setup name="FabricDemo">
import { defineComponent, onMounted, ref } from "vue";
import { Canvas, Rect, Circle, Textbox } from "fabric";
const canvasContainer = ref(null);
let canvas = null;
onMounted(() => {canvas = new Canvas(canvasContainer.value, {width: 800,height: 600,});// 添加背景矩形作为底层var rect = new Rect({left: 50,top: 50,fill: "red",width: 200,height: 200,opacity: 0.5,});canvas.add(rect);// 添加中间层圆形var circle = new Circle({radius: 50,left: 100,top: 100,fill: "green",opacity: 0.7,});canvas.add(circle);// 在最上层添加文本var text = new Textbox("Hello Fabric.js", {left: 150,top: 150,fontSize: 20,fill: "white",});canvas.add(text);canvas.sendToBack(text);
});
</script>
八、数据导入导出
Fabric.js 支持svg,json,图像等文件的导出。
<template><div style="padding: 20px"><canvaswidth="500"height="500"ref="canvasContainer"style="border: 1px solid rgba(69, 154, 235, 0.55)"></canvas><div style="margin-top: 20px"><button @click="exportCanvasAsImage">导出为 PNG 图片</button></div></div>
</template>
<script lang="ts" setup name="FabricDemo">
import { defineComponent, onMounted, ref } from "vue";
import { Canvas, Rect, Circle, Textbox } from "fabric";
const canvasContainer = ref(null);
let canvas = null;
onMounted(() => {canvas = new Canvas(canvasContainer.value, {width: 800,height: 600,});// 添加背景矩形作为底层var rect = new Rect({left: 50,top: 50,fill: "red",width: 200,height: 200,opacity: 0.5,});canvas.add(rect);// 添加中间层圆形var circle = new Circle({radius: 50,left: 100,top: 100,fill: "green",opacity: 0.7,});canvas.add(circle);// 在最上层添加文本var text = new Textbox("Hello Fabric.js", {left: 150,top: 150,fontSize: 20,fill: "white",});canvas.add(text);canvas.sendToBack(text);
});
// 导出画布为 PNG 并下载
const exportCanvasAsImage = () => {if (!canvas) return;// 方法1: 使用 toDataURL 导出为 base64 URLconst dataURL = canvas.toDataURL({format: "png", // 可选: 'jpeg', 'png', 'webp'quality: 0.9, // 仅对 jpeg/webp 有效enableRetinaScaling: true, // 启用高清屏缩放});// 创建一个临时的 a 标签用于下载const link = document.createElement("a");link.href = dataURL;link.download = "fabric-canvas-export.png"; // 下载的文件名link.click();
};
</script>
<style scoped lang="scss"></style>
九、配置控件
Fabric.js对象的控件具有由控件类和对象的默认值定义的默认配置。此处列出的 Object Props 和此处列出的 Border Props 是影响控件的属性：
十、为每个对象配置控制默认值
现在，对每个对象执行此作需要您传递每个对象创建的选项，您可以创建一个函数来执行此作，也可以更改Fabric.js默认值，接下来使用函数控制控件，每个对象只需要通过text1.controls = createCustomControls();进行控制样式的添加即可。
<template><div style="padding: 20px"><canvaswidth="500"height="500"ref="canvasContainer"style="border: 1px solid rgba(69, 154, 235, 0.55)"></canvas><div style="margin-top: 20px"><button @click="exportCanvasAsImage">导出为 PNG 图片</button></div></div>
</template>
<script lang="ts" setup name="FabricDemo">
import { defineComponent, onMounted, ref } from "vue";
import { Canvas, Rect, Circle, Textbox, Control, controlsUtils } from "fabric";
const canvasContainer = ref(null);
let canvas = null;
// 绘制实心绿色圆形【控制点绘制】
function renderSolidGreenCircle(ctx: CanvasRenderingContext2D,left: number,top: number
) {const size = 10;ctx.save();ctx.fillStyle = "#00FF00";ctx.beginPath();ctx.arc(left, top, size / 2, 0, 2 * Math.PI);ctx.fill();ctx.restore();
}
// 创建矩形控制点
function createCustomControls() {const commonOpts = {cursorStyle: "pointer", // 鼠标样式withConnection: false, // 是否连接render: renderSolidGreenCircle, // 绘制圆形cornerSize: 10, // 控制点大小};return {// 左上角 - 等比缩放tl: new Control({...commonOpts,x: -0.5,y: -0.5,cursorStyle: "nw-resize",actionHandler: controlsUtils.scalingEqually,}),// 右上角 - 等比缩放tr: new Control({...commonOpts,x: 0.5,y: -0.5,cursorStyle: "ne-resize",actionHandler: controlsUtils.scalingEqually,}),// 左下角 - 等比缩放bl: new Control({...commonOpts,x: -0.5,y: 0.5,cursorStyle: "sw-resize",actionHandler: controlsUtils.scalingEqually,}),// 右下角 - 等比缩放br: new Control({...commonOpts,x: 0.5,y: 0.5,cursorStyle: "se-resize",actionHandler: controlsUtils.scalingEqually,}),// 左边中点 - 横向缩放ml: new Control({...commonOpts,x: -0.5,y: 0,cursorStyle: "w-resize",actionHandler: controlsUtils.scalingX,}),// 右边中点 - 横向缩放mr: new Control({...commonOpts,x: 0.5,y: 0,cursorStyle: "e-resize",actionHandler: controlsUtils.scalingX,}),// 上边中点 - 纵向缩放mt: new Control({...commonOpts,x: 0,y: -0.5,cursorStyle: "n-resize",actionHandler: controlsUtils.scalingY,}),// 下边中点 - 纵向缩放mb: new Control({...commonOpts,x: 0,y: 0.5,cursorStyle: "s-resize",actionHandler: controlsUtils.scalingY,}),// 旋转控制点，暂时不需要旋转需求mtr: new Control({...commonOpts,x: 0,y: -0.7,cursorStyle: "crosshair",actionHandler: controlsUtils.rotationWithSnapping,offsetY: -10, // 合理调整旋转点距离顶部的距离}),};
}
onMounted(() => {canvas = new Canvas(canvasContainer.value, {width: 800,height: 600,});const text1 = new Textbox("Fabric.JS", {});text1.controls = createCustomControls();canvas.add(text1);canvas.centerObject(text1);canvas.setActiveObject(text1);
});
// 导出画布为 PNG 并下载
const exportCanvasAsImage = () => {if (!canvas) return;// 方法1: 使用 toDataURL 导出为 base64 URLconst dataURL = canvas.toDataURL({format: "png", // 可选: 'jpeg', 'png', 'webp'quality: 0.9, // 仅对 jpeg/webp 有效enableRetinaScaling: true, // 启用高清屏缩放});// 创建一个临时的 a 标签用于下载const link = document.createElement("a");link.href = dataURL;link.download = "fabric-canvas-export.png"; // 下载的文件名link.click();
};
</script>
<style scoped lang="scss"></style>十一、对象、属性和行为的缓存
如下是个人对Fabric.js的缓存属性和行为的总结，可以去【Fabric.js官网查看缓存的总结直通车>>>>】自行查看，唉，读Fabric.js官网的文档有一种心累的感觉。
在 Fabric.js 中，缓存（Caching）是提高性能的关键特性之一。它允许对象、属性和行为的渲染结果被临时存储，从而避免每次重绘时都进行复杂的计算或绘制操作，进而提升应用的响应速度和效率。
缓存基础
- 对象缓存
当一个对象被创建并添加到画布上后，Fabric.js可以将该对象的渲染结果缓存为图像。这意味着在后续的重绘过程中，如果对象没有发生改变，则可以直接使用缓存的图像而不是重新渲染整个对象。 - 属性缓存
对于一些计算成本较高的属性（例如阴影、渐变等），可以将其计算结果缓存起来。这样，在相同的属性值下，不需要重复计算，直接使用缓存的结果即可。 - 行为缓存
指的是对对象交互（如移动、缩放、旋转等）产生的视觉变化进行缓存。这使得在进行这些操作时，能够更快速地更新视图。 - 如何启用缓存
在Fabric.js中，你可以通过设置对象的object.caching属性来控制是否对该对象启用缓存，默认情况下是启用的。你也可以通过object.cacheProperties来指定哪些属性需要缓存。
let rect = new fabric.Rect({left: 50,top: 50,width: 200,height: 200,fill: 'red',caching: true, // 默认是 truecacheProperties: ['fill', 'stroke'] // 指定要缓存的属性
});
缓存的工作原理
当对象首次被绘制时Fabric.js 会根据对象的状态生成一张位图，并将其存储。在随后的绘制循环中，如果对象没有发生变化，就会直接使用这张缓存的位图，而不再执行对象的实际绘制逻辑。如果对象发生了变化（如位置移动、大小调整等），则会清除当前缓存，并根据新的状态重新生成缓存。
注意事项
- 内存占用
虽然缓存能显著提升性能，但它也会增加内存消耗，特别是当你有很多复杂对象或者非常大的画布时。因此，合理管理缓存非常重要。 - 刷新缓存
当对象的某些属性（比如颜色、大小等）发生变化时，你需要确保缓存得到正确更新。Fabric.js自动处理了大多数情况下的缓存更新，但在一些特殊场景下，可能需要手动调用object.set('cacheDirty', true)来标记缓存为脏，从而触发重新生成。
缓存机制是 Fabric.js 提供的一个强大工具，用于优化图形密集型应用的性能。理解如何有效利用缓存，可以帮助你构建更加流畅高效的 Web 应用。
使用示例
// 标记多边形需要重新渲染polygon.set({ dirty: true });group.set({ dirty: true });polygon.setCoords();// 强制更新组的包围盒polygon.setCoords(); // 更新group.setCoords(); // 更新fCanvas.renderAll();fCanvas.requestRenderAll();
此dirty布尔值将缓存状态标记为 true，并将在下一个渲染周期中导致重新渲染，强制缓存刷新的方法。
使用之对象及属性与方法
接下来介绍一下我在标注项目开发中用到的对象及其常用属性和方法，如果想更详细的可以参考官网的内容，fabric.js对象属性方法全直通车>>>>，以下是我开发中的常用的，如果想看更多请通过直通车到官网查看更全的api。
Canvas画布
属性
| 属性名 | 描述 |
|---|---|
backgroundColor | 设置画布的背景颜色。 |
selection | 控制是否启用选择功能。如果设为 true（默认），用户可以通过点击或拖动来选择对象。 |
preserveObjectStacking | 如果设置为true，则不允许通过选择对象自动将它们带到最前面，这有助于保持对象堆栈顺序不变。 |
width 和 height | 设置画布的宽度和高度。这些是画布的基本尺寸设定，影响画布显示大小。 |
enableRetinaScaling | 布尔值，是否在高分辨率屏幕上启用视网膜缩放以提升清晰度 |
方法
| 方法名 | 描述 |
|---|---|
getZoom() | 获取画布当前缩放比例。 |
viewportTransform() | 表示当前视口的变换矩阵（6 个元素的数组），控制画布的平移、缩放、旋转等视觉变换。 |
setActiveObject(object) | 将指定对象设为“激活状态”（即选中状态），使其出现控制框（controls）。 |
getObjects() | 获取画布上所有对象的数组。 |
discardActiveObject() | 取消当前激活（选中）的对象，关闭其控制框。 |
calcOffset() | 重新计算画布的偏移量（canvas._offset），即画布相对于浏览器窗口的位置。 |
getWidth(), getHeight() | 获取画布的当前宽度和高度（像素值）。 |
setViewportTransform(transform) | 设置视口的变换矩阵，实现平移、缩放等效果。 |
zoomToPoint(point, zoom) | 以指定点为中心进行缩放（如鼠标位置缩放）。 |
add(...objects) | 向画布添加一个或多个对象。这是向画布中加入图形、图像等元素的主要方法。 |
remove(...objects) | 从画布移除一个或多个对象。用于删除不再需要的对象。 |
clear() | 清除画布上的所有对象，但不包括背景色和背景图。它相当于重置画布内容。 |
renderAll() | 重新渲染整个画布。当你对画布进行更改后，调用此方法可以立即看到效果。 |
setZoom(value) | 设置画布的缩放级别。这对于实现放大缩小功能很有用。 |
centerObject(object) | 将指定对象居中显示在画布上。这是一个快速定位对象位置的方法。 |
discardActiveObject() | 取消当前激活的对象，取消选择状态。 |
requestRenderAll() | 请求重新渲染画布。与 renderAll() 不同的是，它是异步执行的，可以在性能优化时使用。 |
toDataURL() | 返回画布的当前内容作为PNG格式的数据URL。这对于保存或分享画布内容非常有用。 |
loadFromJSON(json) | 从JSON数据加载画布状态。这对于恢复之前保存的画布状态非常有用。 |
Rect矩形
属性
| 属性名 | 说明 |
|---|---|
angle | 设置或获取矩形旋转的角度。 |
backgroundColor | 这个属性不是 Rect 类直接支持的属性。通常来说，背景颜色是设置画布的背景色，而不是矩形对象本身的属性。 |
borderColor | 设置选中时边框的颜色。 |
cornerColor | 设置控制点（调整大小的手柄）的颜色。 |
dirty | 标识对象是否需要重新渲染。内部使用，一般不直接操作。 |
evented | 决定该对象是否响应鼠标事件。 |
fill | 设置矩形的填充颜色。 |
fillRule | 确定如何处理非零环绕数和奇偶规则填充。值可以为 "nonzero" 或 "evenodd"。 |
width 和 height | 分别设置矩形的宽度和高度。 |
left 和 top | 矩形左上角相对于其容器（通常是canvas）的位置。 |
originX 和 originY | 定义了对象变换（如缩放、旋转）的原点位置，可以是 'left', 'center', 'right' 等。 |
scaleX 和 scaleY | 分别沿X轴和Y轴缩放对象的比例。 |
selectable | 是否可以选择该对象。 |
selectionBackgroundColor | 选中对象时的背景颜色。 |
strokeWidth | 描边的宽度。 |
cornerStrokeWidth | 控制点（调整大小的手柄）描边的宽度。 |
strokeUniform | 如果为true，则笔触宽度不受缩放影响。 |
visible | 对象是否可见。 |
type | 返回对象的类型，对于矩形对象总是返回"rect"。 |
方法
| 方法名 | 描述 |
|---|---|
set(key, value) | 设置对象的指定属性。 |
get(key) | 获取对象的指定属性值。 |
toObject() | 将对象转换为JSON对象，方便序列化。 |
animate(property, value, [options]) | 动态改变对象的属性到指定值，可指定动画持续时间等选项。 |
setCoords() | 更新对象的坐标信息，当对象被移动或者变形后可能需要用到。 |
Polygon多边形
属性
| 属性名 | 描述 |
|---|---|
angle | 设置或获取多边形旋转的角度（以度为单位） |
fill | 设置多边形的填充颜色。 |
stroke | 设置多边形的描边颜色。 |
strokeWidth | 设置多边形描边的宽度。 |
opacity | 设置多边形的整体透明度（0 到 1）。 |
left 和 top | 多边形中心点相对于其容器（通常是 canvas）的位置。 |
width 和 height | 多边形的宽度和高度，通常由 points 数组自动计算得出。 |
scaleX 和 scaleY | 分别沿 X 轴和 Y 轴缩放对象的比例。 |
flipX 和 flipY | 是否在 X 轴或 Y 轴上翻转对象。 |
skewX 和 skewY | 设置对象在 X 轴或 Y 轴上的倾斜角度。 |
originX 和 originY | 定义了对象变换（如缩放、旋转）的原点位置，可以是 ‘left’, ‘center’, ‘right’ 等 |
backgroundColor | 这个属性不是 Polygon 类直接支持的属性。 |
borderColor | 设置选中时边框的颜色。 |
borderDashArray | 设置边框的虚线样式。 |
borderOpacityWhenMoving | 当对象移动时边框的透明度。 |
borderScaleFactor | 边框的缩放因子。 |
cornerColor | 设置控制点（调整大小的手柄）的颜色。 |
cornerDashArray | 控制点的虚线样式。 |
cornerSize | 控制点的大小。 |
cornerStrokeColor | 控制点描边的颜色。 |
cornerStyle | 控制点的样式，可以是 'circle' 或 'rect'。 |
fillRule | 确定如何处理非零环绕数和奇偶规则填充。值可以为 "nonzero" 或 “evenodd”。 |
globalCompositeOperation | 设置绘制时的合成操作，如 'source-over', 'multiply' 等。 |
hasBorders | 是否显示边框。 |
hasControls | 是否显示控制点。 |
padding | 对象周围的填充。 |
paintFirst | 指定先绘制填充还是描边，可选值为 'fill' 或 'stroke'。 |
shadow | 设置对象的阴影效果。 |
strokeDashOffset | 描边虚线的偏移量。 |
strokeLineCap | 描边线的端点样式，如 'butt', 'round', 'square'。 |
strokeLineJoin | 描边线的连接处样式，如 'miter', 'round', 'bevel'。 |
strokeMiterLimit | 描边线连接处的斜接限制。 |
strokeUniform | 如果为 true，则笔触宽度不受缩放影响。 |
transparentCorners | 控制点是否透明。 |
visible | 对象是否可见。 |
evented | 决定该对象是否响应鼠标事件。 |
selectable | 是否可以选择该对象。 |
lockMovementX 和 lockMovementY | 是否锁定 X 轴或 Y 轴上的移动。 |
lockRotation | 是否锁定旋转。 |
lockScalingX 和 lockScalingY | 是否锁定 X 轴或 Y 轴上的缩放。 |
lockScalingFlip | 是否锁定缩放时的翻转。 |
lockSkewingX 和 lockSkewingY | 是否锁定 X 轴或 Y 轴上的倾斜。 |
hoverCursor | 鼠标悬停时的光标样式。 |
moveCursor | 移动对象时的光标样式。 |
perPixelTargetFind | 是否启用像素级目标查找，对于复杂形状非常有用。 |
snapAngle | 旋转时的角度吸附。 |
snapThreshold | 旋转或移动时的吸附阈值。 |
points | 一个包含 { x, y } 对象的数组，定义了多边形的顶点。 |
pathOffset | 路径的偏移量，通常用于优化渲染。 |
inverted | 是否反转多边形的填充方向。 |
aCoords | 对象的绝对坐标，表示对象四个角的世界坐标。 |
oCoords | 对象的相对坐标，表示对象四个角相对于对象自身的坐标。 |
dirty | 标识对象是否需要重新渲染。内部使用，一般不直接操作。 |
matrixCache | 缓存对象的变换矩阵，用于提高性能。 |
objectCaching | 是否启用对象缓存，对于复杂的对象可以提高渲染性能。 |
noScaleCache | 当对象被缩放时是否禁用缓存。 |
minScaleLimit | 缩放的最小限制。 |
excludeFromExport | 是否在导出时排除该对象。 |
__corner | 当前正在操作的控制点索引。 |
_controlsVisibility | 控制点的可见性。 |
_scaling | 当前是否正在进行缩放操作。 |
isMoving | 当前对象是否正在移动。 |
ownMatrixCache | 对象自己的矩阵缓存。 |
clipPath | 裁剪路径，用于定义对象的可见区域。 |
clipPathId | 裁剪路径的ID。 |
controls | 自定义控制点的配置。 |
parent | 对象的父对象。 |
type | 返回对象的类型，对于多边形对象总是返回 "polygon"。 |
方法
| 方法名 | 描述 |
|---|---|
set(key, value) | 设置对象的指定属性。 |
get(key) | 获取对象的指定属性值。 |
toObject() | 将对象转换为 JSON 对象，方便序列化。 |
animate(property, value, [options]) | 动态改变对象的属性到指定值，可指定动画持续时间等选项。 |
setCoords() | 更新对象的坐标信息，当对象被移动或者变形后可能需要用到。 |
Group组
属性
| 属性名 | 描述 |
|---|---|
angle | 设置或获取组旋转的角度（以度为单位）。 |
fill | 设置组的填充颜色,注意，这通常只对整个组应用背景色时有用，对于组内的对象，其各自的填充颜色会被保留。 |
stroke 和 strokeWidth | 设置组的描边颜色和宽度,同样，这些设置可能不会影响组内对象的描边属性。 |
opacity | 设置组的整体透明度（0 到 1），组内对象的透明度会乘以这个值。 |
left 和 top | 组中心点相对于其容器（通常是 canvas）的位置。 |
scaleX 和 scaleY | 分别沿 X 轴和 Y 轴缩放组的比例。 |
flipX 和 flipY | 是否在 X 轴或 Y 轴上翻转组。 |
skewX 和 skewY | 设置组在 X 轴或 Y 轴上的倾斜角度。 |
originX 和 originY | 定义了组变换（如缩放、旋转）的原点位置，可以是 ‘left’, ‘center’, ‘right’ 等。 |
backgroundColor | 这个属性不是 Group 类直接支持的属性,通常来说，背景颜色是设置画布的背景色，而不是组对象本身的属性。 |
borderColor, borderDashArray, borderOpacityWhenMoving, borderScaleFactor | 控制选中状态下的边框样式。 |
cornerColor, cornerDashArray, cornerSize, cornerStrokeColor, cornerStyle | 控制调整大小的手柄（控制点）的样式。 |
fillRule | 决定如何处理非零环绕数和奇偶规则填充,值可以为 “nonzero” 或 “evenodd”。 |
globalCompositeOperation | 设置绘制时的合成操作，如 ‘source-over’, ‘multiply’ 等。 |
hasBorders, hasControls | 是否显示边框和控制点。 |
padding | 组周围的填充。 |
paintFirst | 指定先绘制填充还是描边，可选值为 ‘fill’ 或 ‘stroke’。 |
shadow | 设置组的阴影效果。 |
strokeDashOffset, strokeLineCap, strokeLineJoin, strokeMiterLimit, strokeUniform | 描边的各种样式选项。 |
evented | 决定该组是否响应鼠标事件。 |
selectable | 是否可以选择该组。 |
lockMovementX, lockMovementY, lockRotation, lockScalingX, lockScalingY, lockSkewingX, lockSkewingY | 锁定组的移动、旋转、缩放和倾斜。 |
hoverCursor, moveCursor | 鼠标悬停和移动对象时的光标样式。 |
perPixelTargetFind | 是否启用像素级目标查找，对于复杂形状非常有用。 |
snapAngle, snapThreshold | 旋转或移动时的角度和距离吸附。 |
subTargetCheck | 如果为 true，则点击组时也会检查组内的子对象是否被点击。 |
_objects | 组内包含的对象数组。 |
clipPath | 应用于组的裁剪路径，用于定义组的可见区域。 |
excludeFromExport | 是否在导出时排除该组。 |
interactive | 是否使组成为交互式的，允许选择、缩放等操作。 |
isMoving | 当前组是否正在移动（内部使用）。 |
layoutManager | 组布局管理器（如果有的话）。 |
aCoords | 组的绝对坐标，表示组四个角的世界坐标。 |
oCoords | 组的相对坐标，表示组四个角相对于组自身的坐标。 |
dirty | 标识组是否需要重新渲染,内部使用，一般不直接操作。 |
matrixCache | 缓存组的变换矩阵，用于提高性能。 |
objectCaching | 是否启用对象缓存，对于复杂的组可以提高渲染性能。 |
noScaleCache | 当组被缩放时是否禁用缓存。 |
minScaleLimit | 缩放的最小限制。 |
ownMatrixCache | 组自己的矩阵缓存。 |
parent | 组的父对象（如果有）。 |
type | 返回对象的类型，对于组对象总是返回 “group”。 |
__corner | 当前正在操作的控制点索引。 |
_controlsVisibility | 控制点的可见性。 |
_scaling | 当前是否正在进行缩放操作。 |
cacheProperties, colorProperties, customProperties | 用于定义哪些属性应该被序列化到 JSON 中，哪些属性涉及颜色，以及自定义属性。 |
stateProperties | 定义哪些属性属于状态属性，会影响对象的状态。 |
方法
| 方法名 | 描述 |
|---|---|
addWithUpdate(object) | 向组中添加对象并更新组尺寸。 |
removeWithUpdate(object) | 从组中移除对象并更新组尺寸。 |
item(index) | 获取组中的第 n 个对象。 |
forEachObject(callback) | 对组中的每个对象执行回调函数。 |
getObjects() | 返回组内包含的所有对象数组，与直接访问 _objects 属性不同，此方法更符合面向对象编程的最佳实践。 |
toActiveSelection() | 将当前组转换为活动选择（fabric.ActiveSelection），允许对组内的对象进行单独编辑或移动。 |
toGroup() | 如果调用此方法的对象是 fabric.ActiveSelection 类型，则将其转换回 fabric.Group。这在取消对组内个别对象的选择后可能很有用。 |
realizeTransform(object) | 应用组变换到指定对象上，并移除该对象的变换属性，使其坐标等属性反映变换后的状态。 |
setCoords( skipCorners ) | 更新组及其子对象的位置坐标，默认情况下也会更新角落位置(corners)，但可以通过传递参数 skipCorners=true 来跳过这个步骤。 |
destroy() | 清理组以及其内部对象的相关引用，帮助垃圾回收机制回收资源，注意这不是撤销组的操作，而是彻底销毁它。 |
Line线
属性
| 属性名 | 描述 |
|---|---|
angle | 设置或获取线段旋转的角度（以度为单位）。 |
left 和 top | 线段起始点相对于其容器（通常是 canvas）的位置。 |
x1, y1, x2, y2 | 定义线段起点和终点的坐标，这是 Line 类特有的属性。 |
stroke | 设置线段的颜色。 |
strokeWidth | 设置线段的宽度。 |
opacity | 设置线段的整体透明度（0 到 1）。 |
scaleX 和 scaleY | 分别沿 X 轴和 Y 轴缩放对象的比例。 |
flipX 和 flipY | 是否在 X 轴或 Y 轴上翻转对象。 |
skewX 和 skewY | 设置对象在 X 轴或 Y 轴上的倾斜角度。 |
originX 和 originY | 定义了对象变换（如缩放、旋转）的原点位置，可以是 ‘left’, ‘center’, ‘right’ 等。 |
strokeDashArray | 设置描边的虚线样式。 |
strokeDashOffset | 描边虚线的偏移量。 |
strokeLineCap | 描边线的端点样式，如 ‘butt’, ‘round’, ‘square’。 |
strokeLineJoin | 描边线的连接处样式，如 ‘miter’, ‘round’, ‘bevel’。 |
strokeMiterLimit | 描边线连接处的斜接限制。 |
strokeUniform | 如果为 true，则笔触宽度不受缩放影响。 |
shadow | 设置对象的阴影效果。 |
globalCompositeOperation | 设置绘制时的合成操作，如 ‘source-over’, ‘multiply’ 等。 |
paintFirst | 指定先绘制填充还是描边，可选值为 ‘fill’ 或 ‘stroke’（对于线段，通常使用 ‘stroke’）。 |
transparentCorners | 控制点是否透明。 |
evented | 决定该对象是否响应鼠标事件。 |
selectable | 是否可以选择该对象。 |
lockMovementX 和 lockMovementY | 是否锁定 X 轴或 Y 轴上的移动。 |
lockRotation | 是否锁定旋转。 |
lockScalingX 和 lockScalingY | 是否锁定 X 轴或 Y 轴上的缩放。 |
lockScalingFlip | 是否锁定缩放时的翻转。 |
lockSkewingX 和 lockSkewingY | 是否锁定 X 轴或 Y 轴上的倾斜。 |
hoverCursor | 鼠标悬停时的光标样式。 |
moveCursor | 移动对象时的光标样式。 |
perPixelTargetFind | 是否启用像素级目标查找，对于复杂形状非常有用。 |
snapAngle | 旋转时的角度吸附。 |
snapThreshold | 旋转或移动时的吸附阈值。 |
hasBorders | 是否显示边框。 |
hasControls | 是否显示控制点。 |
aCoords | 对象的绝对坐标，表示对象四个角的世界坐标。 |
oCoords | 对象的相对坐标，表示对象四个角相对于对象自身的坐标。 |
dirty | 标识对象是否需要重新渲染，内部使用，一般不直接操作。 |
matrixCache | 缓存对象的变换矩阵，用于提高性能。 |
objectCaching | 是否启用对象缓存，对于复杂的对象可以提高渲染性能。 |
noScaleCache | 当对象被缩放时是否禁用缓存。 |
minScaleLimit | 缩放的最小限制。 |
excludeFromExport | 是否在导出时排除该对象。 |
includeDefaultValues | 序列化时是否包含默认值。 |
ownMatrixCache | 对象自己的矩阵缓存。 |
clipPath | 裁剪路径，用于定义对象的可见区域。 |
clipPathId | 裁剪路径的 ID。 |
controls | 自定义控制点的配置。 |
parent | 对象的父对象。 |
type | 返回对象的类型，对于线段对象总是返回 “line”。 |
__corner | 当前正在操作的控制点索引。 |
_controlsVisibility | 控制点的可见性。 |
_scaling | 当前是否正在进行缩放操作。 |
isMoving | 当前对象是否正在移动。 |
ownDefaults | 对象的默认设置。 |
stateProperties | 状态属性，用于跟踪对象的状态变化。 |
borderColor | 设置选中时边框的颜色。 |
borderOpacityWhenMoving | 当对象移动时边框的透明度。 |
borderScaleFactor | 边框的缩放因子。 |
cornerColor | 设置控制点（调整大小的手柄）的颜色。 |
cornerDashArray | 控制点的虚线样式。 |
cornerSize | 控制点的大小。 |
cornerStrokeColor | 控制点描边的颜色。 |
cornerStyle | 控制点的样式，可以是 ‘circle’ 或 ‘rect’。 |
padding | 对象周围的填充。 |
visible | 对象是否可见。 |
方法
| 方法名 | 描述 |
|---|---|
set(key, value) 和 set({ key: value, ... }) | 修改线段的一个或多个属性。 |
get(key) | 获取线段的某个属性值。 |
setCoords() | 重新计算并更新线段的内部坐标缓存(oCoords和aCoords)。 |
toObject([propertiesToInclude]) | 将线段对象序列化为一个标准的 JavaScript 对象（JSON 兼容）。 |
toSVG() | 生成表示该线段的 SVG 字符串。 |
clone(callback, [propertiesToInclude]) | 创建线段的一个副本。 |
animate(property, value, [options]) | 让线段的某个属性（如 x2, strokeWidth, opacity）产生动画效果。 |
calcOCoords() 和 calcACoords() | calcOCoords() 计算对象自身坐标系下的控制点坐标 (oCoords)，calcACoords() 计算对象在画布坐标系下的角点坐标 (aCoords)。 |
getBoundingRect([absolute]) | 获取线段的边界矩形（一个包含 left, top, width, height 的对象）。 |
containsPoint(point) | 判断给定的点（通常是鼠标点击点）是否“命中”了这条线。 |
isOnScreen() | 判断线段当前是否在画布的可视区域内（考虑了画布的缩放和平移）。 |
Point点
属性
| 属性名 | 描述 |
|---|---|
x | 点在 X 轴上的坐标。 |
y | 点在 Y 轴上的坐标。 |
方法
| 方法名 | 描述 |
|---|---|
add(point) | 将当前点与另一个点相加（向量加法），返回一个新的 fabric.Point 对象。 |
subtract(point) | 从当前点减去另一个点（向量减法），返回一个新的 fabric.Point 对象。 |
multiply(value) | 将当前点的每个坐标乘以一个数值，返回一个新的 fabric.Point 对象。 |
divide(value) | 将当前点的每个坐标除以一个数值，返回一个新的 fabric.Point 对象。 |
scalarAdd(value) | 给当前点的每个坐标加上一个标量值，返回一个新的 fabric.Point 对象。 |
scalarSubtract(value) | 从当前点的每个坐标中减去一个标量值，返回一个新的 fabric.Point 对象。 |
scalarMultiply(value) | 将当前点的每个坐标乘以一个标量值，返回一个新的 fabric.Point 对象。 |
scalarDivide(value) | 将当前点的每个坐标除以一个标量值，返回一个新的 fabric.Point 对象。 |
lerp(point, t) | 根据参数 t (0 到 1) 在当前点和指定点之间进行线性插值，返回一个新的 fabric.Point 对象。 |
eq(point) | 如果当前点等于给定点，则返回 true。 |
lt(point) | 如果当前点小于给定点，则返回 true。 |
lte(point) | 如果当前点小于或等于给定点，则返回 true。 |
gt(point) | 如果当前点大于给定点，则返回 true。 |
gte(point) | 如果当前点大于或等于给定点，则返回 true。 |
distanceFrom(point) | 计算当前点到另一个点之间的距离。 |
midPointFrom(point) | 计算当前点与另一个点之间的中点，并返回一个新的 fabric.Point 对象。 |
rotate(angle, [origin]) | 围绕指定原点旋转当前点，如果未提供原点，则默认为 (0, 0)。 |
transform(transformMatrix, [noUnitize]) | 使用给定的变换矩阵对当前点进行变换，如果 noUnitize 设置为 true，则不进行单位化处理。 |
clone() | 创建当前点的一个副本。 |
setX(x) / setY(y) / setXY(x, y) | 分别设置点的 x 坐标、y 坐标或同时设置 x 和 y 坐标。 |
toString() | 返回表示该点的字符串形式。 |
swap() | 交换点的 x 和 y 值。 |
setFromPoint(point) | 从另一个点复制坐标值到当前点。 |
max(point) / min(point) | 返回两个点中较大或较小的那个点。 |
addEquals(point) / subtractEquals(point) / scalarAddEquals(value) / scalarSubtractEquals(value) / scalarMultiplyEquals(value) / scalarDivideEquals(value) | 这些方法修改当前点而不是创建新点。 |