FabricJS7.0笔记

5-6版本有破坏性升级，很多obj和canvas的方法链更新，旧方法失效

1.对于整个canvas对象

负责管理画布上所有的对象（图形、图片、文本等），处理用户交互（如鼠标点击、拖拽、选择），并控制最终的渲染和输出

属性

属性名	用途说明
_activeObject	当前画布上唯一被激活（选中）的对象。
_objects	存储画布上所有对象的数组。
_offset	画布元素相对于文档左上角的偏移量，包含 left 和 top。
allowTouchScrolling	是否允许在触摸设备上通过拖拽来滚动画布。
altActionKey	指定哪个修饰键（如 'altKey', 'shiftKey'）可以触发对象的替代变换操作。
altSelectionKey	指定哪个修饰键可以在目标对象重叠时，允许选择被覆盖的对象。
backgroundColor	画布的背景颜色。
backgroundImage	画布的背景图片对象。
backgroundVpt	如果为 false，背景图片将不受视口变换（如缩放、平移）的影响。
centeredKey	指定哪个修饰键可以启用以对象中心为原点进行变换。
centeredRotation	如果为 true，对象将围绕其中心点进行旋转。
centeredScaling	如果为 true，对象将围绕其中心点进行缩放。
clipPath	一个 fabric.Object，用于定义画布的裁剪区域。
containerClass	包裹画布的 div 元素的默认 CSS 类名。
controlsAboveOverlay	如果为 true，对象的选择框和控制点将绘制在覆盖层（overlay）之上。
defaultCursor	画布的默认鼠标光标样式。
destroyed	如果为 true，表示画布实例已被销毁。
disposed	如果为 true，表示画布实例正在被销毁的过程中。
elements	一个 CanvasDOMManager 实例，用于管理画布相关的 DOM 元素。
enablePointerEvents	如果为 true，将使用原生的 PointerEvent 而不是 Fabric.js 封装的事件。
enableRetinaScaling	如果为 true，画布会根据设备的像素比进行缩放，以在视网膜屏幕上获得更清晰的渲染效果。
fireMiddleClick	是否触发鼠标中键点击事件。
fireRightClick	是否触发鼠标右键点击事件。
freeDrawingBrush	自由绘图模式下使用的画笔对象。
freeDrawingCursor	自由绘图模式下的鼠标光标样式。
height	画布的逻辑高度（像素）。
hoverCursor	鼠标悬停在对象上时的光标样式。
imageSmoothingEnabled	是否启用图像平滑处理。
includeDefaultValues	在序列化对象时，是否包含默认属性值。
isDrawingMode	如果为 true，画布进入自由绘图模式。
moveCursor	移动对象时的鼠标光标样式。
notAllowedCursor	当操作不被允许时（如禁用角落的控制点）的光标样式。
overlayColor	画布的覆盖层颜色。
overlayImage	画布的覆盖层图片对象。
overlayVpt	如果为 false，覆盖层图片将不受视口变换的影响。
patternQuality	在 Node.js 环境下控制图案的渲染质量。
perPixelTargetFind	如果为 true，对象检测将基于像素级别而不是边界框，可以实现更精确的点击检测。
preserveObjectStacking	如果为 true，对象被选中时不会自动移到最顶层，保持原有的堆叠顺序。
renderOnAddRemove	如果为 true，在添加或移除对象后会自动重新渲染画布。
selection	如果为 true，启用框选功能。
selectionBorderColor	选区边框的颜色。
selectionColor	选区的填充颜色。
selectionDashArray	选区边框的虚线样式。
selectionFullyContained	如果为 true，只有完全被选区矩形包含的对象才会被选中。
selectionKey	指定哪个或哪些修饰键可以启用多选。
selectionLineWidth	选区边框的线宽。
skipOffscreen	如果为 true，将跳过渲染完全在视口之外的对象，以提升性能。
skipTargetFind	如果为 true，将跳过目标对象检测，所有点击事件都不会关联到任何对象。
stopContextMenu	如果为 true，将阻止画布上的右键菜单弹出。
svgViewportTransformation	如果为 true，导出 SVG 时会应用视口变换。
targetFindTolerance	在检测目标对象时，围绕鼠标指针的容差像素数。
textEditingManager	用于管理文本编辑的实例。
uniformScaling	如果为 true，对象将被等比缩放。
uniScaleKey	指定哪个修饰键可以切换等比缩放功能。
viewportTransform	视口的变换矩阵，用于实现画布的平移和缩放。
vptCoords	当前视口边界在场景坐标系中的四个角点坐标。
width	画布的逻辑宽度（像素）。

方法

渲染与导出

方法名	用途说明
renderAll	立即重新渲染整个画布，包括背景、所有对象和覆盖层。
requestRenderAll	请求在下一个动画帧中重新渲染画布。这是性能更优的渲染方式，Fabric.js 会自动合并多次请求。
renderCanvas	在指定的 2D 上下文上渲染背景、对象和覆盖层。这是一个底层方法。
renderTop	仅渲染顶层画布，主要用于绘制对象的选择框和控制点。
clearContext	清除指定的 2D 绘图上下文。
toDataURL	将画布内容导出为一个 data URL 字符串（例如，一个 base64 编码的 PNG 图片）。
toBlob	将画布内容导出为一个 Blob 对象。
toCanvasElement	将画布内容导出为一个新的 HTMLCanvasElement 元素。
toSVG	将画布内容导出为 SVG 格式的字符串。
toJSON	将画布及其所有对象序列化为一个标准的 JSON 对象。
toObject	返回画布的对象表示形式，与 toJSON 类似。
toDatalessJSON	返回一个"无数据"的 JSON 对象，通常用于优化，例如将图片路径替换为 URL 而不是内嵌数据。
toDatalessObject	与 toDatalessJSON 类似，但返回的是普通对象。
createSVGFontFacesMarkup	创建包含 SVG 字体定义的 <font-face> 标签的字符串。
createSVGRefElementsMarkup	创建包含 SVG 渐变、图案等引用元素的字符串。
createSVGClipPathMarkup	创建 SVG 裁剪路径的标记字符串。
drawClipPathOnCanvas	在画布上绘制裁剪路径。

对象管理

用于向画布添加、移除、查找和管理对象。

方法名	用途说明
add	向画布中添加一个或多个对象。
remove	从画布中移除一个或多个对象。
insertAt	在指定的索引位置插入一个或多个对象。
clear	清空画布上的所有对象。
getObjects	获取画布上所有对象的数组。
item	根据索引获取画布上的单个对象。
size	获取画布上对象的总数。
isEmpty	检查画布是否为空（即不包含任何对象）。
contains	检查画布是否包含某个特定对象。
forEachObject	遍历画布上的每个对象，并对每个对象执行一个回调函数。
collectObjects	根据一个边界框，收集所有与之相交或包含在内的对象，主要用于实现框选功能。
complexity	返回一个数字，代表画布上所有对象复杂度的总和。
moveObjectTo	将指定对象移动到堆叠顺序中的指定索引位置。
bringObjectForward	将指定对象在堆叠顺序中向上移动一层。
bringObjectToFront	将指定对象移动到堆叠顺序的最顶层。
sendObjectBackwards	将指定对象在堆叠顺序中向下移动一层。
sendObjectToBack	将指定对象移动到堆叠顺序的最底层。
findNewLowerIndex	(内部方法) 计算对象向下移动时的新索引。
findNewUpperIndex	(内部方法) 计算对象向上移动时的新索引。
loadFromJSON	从 JSON 数据中加载并恢复画布状态，这是一个异步方法。
clone	克隆整个画布实例，返回一个 Promise。
cloneWithoutData	克隆一个不包含任何对象数据的新画布实例，仅复制画布本身的设置（如尺寸）。

交互与事件

处理用户与画布的交互，如鼠标事件、对象选择和事件监听。

方法名	用途说明
on	为画布添加一个或多个事件监听器。
off	移除画布上的事件监听器。
once	添加一个只执行一次的事件监听器。
fire	手动触发一个自定义事件。
findTarget	根据鼠标事件，判断当前鼠标指针下的目标对象是什么。
searchPossibleTargets	在一组对象中搜索包含指定指针的第一个对象。
setActiveObject	将一个对象设置为画布上唯一的激活（选中）对象。
getActiveObject	获取当前画布上被激活的对象。
getActiveObjects	获取当前画布上所有被激活的对象数组（用于多选）。
discardActiveObject	取消当前所有对象的激活（选中）状态。
setCursor	设置画布的鼠标光标样式（如 move, pointer 等）。
endCurrentTransform	结束当前正在进行的变换操作（如拖拽、缩放）。
fireEventFromPointerEvent	将一个原生的指针事件转换为 Fabric.js 的事件并触发。
removeListeners	移除所有事件监听器，通常在销毁画布实例时调用。

视图与坐标

用于控制画布的视口（如缩放、平移）以及进行坐标转换。

方法名	用途说明
setZoom	设置画布的缩放级别。
getZoom	获取画布当前的缩放级别。
zoomToPoint	以指定的点为中心进行缩放。
absolutePan	将视口平移，使指定的点移动到画布的左上角。
relativePan	相对地平移视口。
setViewportTransform	设置画布的视口变换矩阵，用于实现复杂的平移、缩放、旋转等效果。
calcViewportBoundaries	计算当前视口变换下，画布四个角的坐标。
getCenterPoint	获取画布的中心点坐标。
getVpCenter	获取当前视口的中心点坐标。
centerObject	将一个对象在画布上水平和垂直居中。
centerObjectH	将一个对象在画布上水平居中。
centerObjectV	将一个对象在画布上垂直居中。
viewportCenterObject	将一个对象在当前视口中水平和垂直居中。
viewportCenterObjectH	将一个对象在当前视口中水平居中。
viewportCenterObjectV	将一个对象在当前视口中垂直居中。
calcOffset	计算画布元素相对于文档左上角的偏移量。
getScenePoint	将鼠标事件坐标转换为场景坐标（不受视口变换影响）。
getViewportPoint	将鼠标事件坐标转换为视口坐标（受视口变换影响）。
isTargetTransparent	检查指定对象在某个坐标点是否是透明的。

设置状态

用于获取和设置画布的各种属性，以及管理其生命周期。

方法名	用途说明
set	设置画布的一个或多个属性值。
get	获取画布的指定属性值。
toggle	切换一个布尔类型的属性值（true/false 互换）。
setDimensions	设置画布的宽度和高度。
getWidth	获取画布的宽度。
getHeight	获取画布的高度。
getElement	获取画布对应的 HTMLCanvasElement 元素。
getContext	获取画布的 2D 绘图上下文（CanvasRenderingContext2D）。
dispose	销毁画布实例，清理所有资源（如事件监听器），返回一个 Promise。
destroy	销毁画布实例。
cancelRequestedRender	取消一个已请求但尚未执行的渲染操作。
toString	返回画布实例的字符串表示。
getDefaults	(静态方法) 获取画布的默认属性值。

2.基础类BaseFabricObject

共有继承基础属性

属性

属性名	用途说明
absolutePositioned	仅当对象用作 clipPath 时有意义。如果为 true，裁剪路径的位置将相对于画布，而不受对象自身变换的影响。
aCoords	描述对象在场景坐标系中的角点位置。这些坐标由对象的 left, top, width, height, scale, skew, angle 等属性计算得出。
angle	对象的旋转角度（以度为单位）。
backgroundColor	对象的背景颜色，接受任何有效的 CSS 颜色值。
centeredRotation	如果为 true，对象将围绕其中心点旋转。如果为 false，则围绕由 originX 和 originY 定义的原点旋转。
centeredScaling	如果为 true，当通过控件缩放对象时，将使用中心点作为变换原点。
clipPath	定义一个裁剪路径对象，当前对象将只在该路径内部显示。
dirty	当设置为 true 时，对象的缓存将在下次渲染时被重新生成。
excludeFromExport	如果为 true，该对象在导出为 JSON 或对象格式时将被排除。
fill	定义对象的填充样式，可以是颜色字符串、渐变或图案。
fillRule	定义填充规则，可接受的值是 nonzero 或 evenodd。
flipX	如果为 true，对象将水平翻转渲染。
flipY	如果为 true，对象将垂直翻转渲染。
globalCompositeOperation	定义对象在画布上绘制时使用的复合操作规则。
height	对象的高度。
includeDefaultValues	如果为 false，对象的默认属性值将不包含在其序列化输出中。
inverted	仅当对象用作 clipPath 时有意义。如果为 true，裁剪效果将反转，即对象在裁剪路径外部显示。
left	对象的左侧位置。默认情况下，该位置是相对于 originX 定义的。
matrixCache	用于存储对象完整变换矩阵的缓存。
minScaleLimit	对象允许的最小缩放值。
objectCaching	如果为 true，对象将被缓存到一个额外的 canvas 上以提升渲染性能。
opacity	对象的透明度，取值范围为 0 到 1。
originX	定义对象水平定位的原点，可设置为 left, center, right。
originY	定义对象垂直定位的原点，可设置为 top, center, bottom。
ownMatrixCache	用于存储对象自身变换矩阵（不包含父级变换）的缓存。
padding	对象与其控制边框之间的内边距（以像素为单位）。
paintFirst	决定是先绘制填充还是先绘制描边，可设置为 fill 或 stroke。
parent	指向对象父级（Group）的引用。
scaleX	对象的水平缩放因子。
scaleY	对象的垂直缩放因子。
shadow	定义对象的阴影效果。
skewX	对象在 X 轴上的倾斜角度（以度为单位）。
skewY	对象在 Y 轴上的倾斜角度（以度为单位）。
stroke	定义对象描边的样式，可以是颜色字符串、渐变或图案。
strokeDashArray	一个数组，用于指定对象描边的虚线模式。
strokeDashOffset	对象描边的虚线偏移量。
strokeLineCap	定义对象描边端点的样式，可设置为 butt, round, square。
strokeLineJoin	定义对象描边拐角的样式，可设置为 bevel, round, miter。
strokeMiterLimit	定义描边拐角为 miter 时的最大斜接长度。
strokeUniform	如果为 true，描边宽度将保持恒定，不随对象的缩放而改变。
strokeWidth	用于渲染对象的描边宽度。
top	对象的顶部位置。默认情况下，该位置是相对于 originY 定义的。
visible	如果为 false，对象将不会被渲染到画布上。
width	对象的宽度。
cacheProperties	静态属性。一个属性名列表，当这些属性被修改时，会触发对象缓存的刷新。
colorProperties	静态属性。一个属性名列表，用于在动画中识别颜色属性。
customProperties	静态属性。一个自定义属性名列表，这些属性在调用 toObject() 时会被序列化。
ownDefaults	静态属性。定义了该类实例的默认属性值。
stateProperties	静态属性。一个属性名列表，用于检查对象状态是否发生变化，主要用于判断组（Group）是否需要重新生成缓存。
type	静态属性。类的类型字符串，用于序列化和反序列化，以识别对象的具体类。

方法

渲染与绘制相关

方法名	用途说明
_drawClipPath	绘制对象的裁剪路径（clipPath）。
_limitCacheSize	限制缓存画布的尺寸，以平衡性能和画质。
_removeCacheCanvas	移除对象的缓存画布。
_setClippingProperties	设置裁剪相关的属性。
_setFillStyles	设置填充样式（如颜色、渐变）。
_setStrokeStyles	设置描边样式（如颜色、宽度、线帽）。
_setupCompositeOperation	设置全局复合操作（globalCompositeOperation），控制对象如何与背景混合。
drawCacheOnCanvas	将缓存的内容绘制到画布上。
drawClipPathOnCache	在缓存上执行裁剪路径的绘制。
drawObject	执行对象的核心绘制操作。
drawSelectionBackground	绘制对象被选中时的背景。
isCacheDirty	检查缓存是否需要更新。
needsItsOwnCache	判断对象是否需要独立的缓存。
render	在指定上下文上渲染对象。
renderCache	渲染对象的缓存。
shouldCache	决定对象是否应该被缓存。
toCanvasElement	将对象转换为一个 HTMLCanvasElement。
toDataURL	将对象转换为 data URL 字符串。
toBlob	将对象转换为一个 Blob 对象。
transform	在渲染时变换上下文（如平移、旋转）。
willDrawShadow	检查对象是否会绘制阴影。

几何与坐标计算

用于获取和计算对象的位置、尺寸、边界框以及与其他对象的空间关系。

方法名	用途说明
calcACoords	计算对象边界框四个角的绝对坐标。
calcOwnMatrix	计算对象自身的变换矩阵（不包含父级变换）。
calcTransformMatrix	计算对象的完整变换矩阵（包含所有父级变换）。
containsPoint	检查一个点是否在对象内部。
getBoundingRect	获取对象边界框的坐标和尺寸（left, top, width, height）。
getCenterPoint	获取对象相对于画布的中心坐标。
getCoords	获取对象四个角的坐标点数组。
getObjectScaling	获取对象的缩放比例（包含父级缩放）。
getPointByOrigin	根据指定的原点（如 'center', 'left'）获取一个点的位置。
getPositionByOrigin	根据指定的原点获取对象的位置。
getRelativeCenterPoint	获取对象相对于其父级的中心坐标。
getRelativeX / Y / XY	获取对象相对于父级坐标系的 X/Y/XY 位置。
getScaledHeight / Width	获取考虑了变换后的对象高度/宽度。
getTotalAngle	获取对象的总旋转角度（包含父级旋转）。
getTotalObjectScaling	获取对象的总缩放比例（包含父级、画布缩放和视网膜屏系数）。
getViewportTransform	从对象的画布中获取视口变换矩阵。
getX / Y / XY	获取对象在画布坐标系中的 X/Y/XY 位置。
intersectsWithObject	检查对象是否与另一个对象相交。
intersectsWithRect	检查对象是否与一个矩形区域相交。
isContainedWithinObject	检查对象是否完全包含在另一个对象内部。
isContainedWithinRect	检查对象是否完全包含在一个矩形区域内。
isOnScreen	检查对象是否在当前视口内（完全或部分）。
isOverlapping	检查对象是否与另一个对象重叠。
isPartiallyOnScreen	检查对象是否部分在当前视口内。
positionByLeftTop	将对象的左上角定位到指定点。
scale	等比缩放对象。
scaleToHeight / Width	将对象缩放到指定的高度/宽度。
setCoords	更新对象的角点和控制点坐标。
setPositionByOrigin	根据指定的原点设置对象的位置。
setRelativeX / Y / XY	在父级坐标系中设置对象的 X/Y/XY 位置。
setX / Y / XY	在画布坐标系中设置对象的 X/Y/XY 位置。
transformMatrixKey	生成一个代表变换矩阵的键值。
translateToCenterPoint	将坐标从原点转换为中心点坐标。
translateToGivenOrigin	将坐标从一种原点转换到另一种原点。
translateToOriginPoint	将坐标从中心点转换为原点坐标。

属性与状态管理

获取、设置、切换对象的属性，以及管理对象的状态。

方法名	用途说明
dispose	取消对象的动画并清理资源。
get	获取指定属性的值。
getObjectOpacity	获取对象的总透明度（包含父级透明度）。
hasFill	判断对象是否会绘制填充。
hasStroke	判断对象是否会绘制描边。
isNotVisible	判断对象是否不可见。
isType	检查对象是否是指定的类型。
rotate	设置对象的旋转角度。
set	设置一个或多个属性的值。
setOnGroup	当对象在组内且组的属性改变时被调用。
toggle	切换一个布尔属性的值（true/false 互换）。

序列化与克隆

用于创建对象的副本，或将对象转换为可存储或传输的格式。

方法名	用途说明
clone	克隆一个对象实例，返回一个 Promise。
cloneAsImage	将对象克隆为一个 Image 实例。
toDatalessObject	返回一个不包含数据的对象表示（用于优化）。
toJSON	返回对象的 JSON 表示。
toObject	返回对象的普通 Object 表示。

层级与关系

判断对象之间的层级、父子等关系。

方法名	用途说明
findCommonAncestors	查找两个对象的共同祖先。
getAncestors	获取对象的所有祖先（从下到上）。
hasCommonAncestors	检查两个对象是否有共同祖先。
isDescendantOf	检查对象是否是另一个对象的后代。
isInFrontOf	检查对象是否在另一个对象的前面。

事件与动画

处理对象的事件监听和属性动画。

方法名	用途说明
animate	对对象的一个或多个属性执行动画。
fire	触发一个自定义事件。
off	移除事件监听器。
on	添加事件监听器。
once	添加一个只执行一次的事件监听器。

3.InteractiveFabricObject

继承自 BaseFabricObject，并在此基础上增加了处理用户交互、控制点、拖拽、动画和事件监听的能力。多数与BaseFabricObject相同，此处追加

方法

交互事件

方法名	用途说明
canDrop	重写此方法以自定义拖放行为，判断对象是否可以被放置。
forEachControl	为对象的每个控制点调用一个函数。
get	获取对象指定属性的值。
getActiveControl	获取当前激活的控制点信息。
isControlVisible	返回指定控制点是否可见。
off	移除事件监听器。
on	添加事件监听器。
once	添加一个只执行一次的事件监听器。
onDeselect	当对象被取消选中时调用的回调函数。
onDragStart	当拖拽会话开始时调用的回调函数。
onSelect	当对象被选中时调用的回调函数。
set	设置对象的一个或多个属性值。
setControlsVisibility	批量设置对象控制点的可见性。
setControlVisible	设置指定控制点的可见性。
shouldStartDragging	重写此方法以自定义拖拽行为，判断是否应开始拖拽。
toggle	切换指定布尔属性的值（true/false 互换）。
fire	触发一个自定义事件。

4.FabricObject

也是基础类，多数与baseFabricObject相同

方法

5.激活类ActiveSelectionOptions

可以通过canvas方法获得当前选择的对象，可以是一个图形或组

方法

对象层级与堆叠管理

控制 ActiveSelection 组内对象的堆叠顺序，以及整个组在画布上的层级。

方法名	用途说明
bringObjectForward	将组内的某个对象向上移动一层。
bringObjectToFront	将组内的某个对象移动到最顶层。
sendObjectBackwards	将组内的某个对象向下移动一层。
sendObjectToBack	将组内的某个对象移动到最底层。
moveObjectTo	将组内的某个对象移动到指定的层级索引位置。
findNewLowerIndex	(内部方法) 计算对象向下移动时的新索引。
findNewUpperIndex	(内部方法) 计算对象向上移动时的新索引。

集合内容管理

管理 ActiveSelection 组中包含哪些对象，是增是删还是查。

方法名	用途说明
add	向组中添加一个或多个对象。
remove	从组中移除一个或多个对象。
insertAt	在指定的索引位置插入一个或多个对象。
removeAll	移除组中的所有对象。
getObjects	获取组内所有对象的数组。
item	根据索引获取组内的单个对象。
size	获取组内对象的数量。
isEmpty	检查组是否为空。
contains	检查组是否包含某个特定对象。
forEachObject	遍历组内的每个对象并执行回调函数。
collectObjects	根据一个边界框，收集所有与之相交或包含在内的对象。
multiSelectAdd	以多选模式添加对象，会考虑堆叠顺序。

渲染与绘制

控制 ActiveSelection 组及其内部对象如何在画布上被绘制出来。

方法名	用途说明
render	在指定的上下文上渲染整个组。
drawObject	执行组的核心绘制操作。
drawBorders	绘制组的边界框。
drawControls	绘制组的控制点（如缩放、旋转手柄）。
drawSelectionBackground	在组的选中边框后绘制一个背景色。
renderCache	渲染组的缓存，以提升性能。
drawCacheOnCanvas	将缓存的内容绘制到画布上。
isCacheDirty	检查缓存是否需要更新。
shouldCache	决定组是否需要被缓存（ActiveSelection 默认不缓存）。
setCoords	更新组及其控制点的坐标。
calcACoords	计算组边界框四个角的绝对坐标。
calcOCoords	计算组控制点的坐标。

几何与坐标计算

计算 ActiveSelection 组的位置、尺寸、边界以及与其他对象的空间关系。

方法名	用途说明
getBoundingRect	获取组的边界矩形（left, top, width, height）。
getCoords	获取组四个角的坐标点数组。
getCenterPoint	获取组相对于画布的中心坐标。
getRelativeCenterPoint	获取组相对于其父级的中心坐标。
containsPoint	检查一个点是否在组的内部。
intersectsWithObject	检查组是否与另一个对象相交。
intersectsWithRect	检查组是否与一个矩形区域相交。
isContainedWithinObject	检查组是否完全包含在另一个对象内部。
isContainedWithinRect	检查组是否完全包含在一个矩形区域内。
isOnScreen	检查组是否在当前视口内。
isPartiallyOnScreen	检查组是否部分在当前视口内。
getScaledWidth / Height	获取考虑了变换后的组的宽度/高度。
calcTransformMatrix	计算组的完整变换矩阵。
getTotalAngle	获取组的总旋转角度。

序列化、克隆与导出

方法名	用途说明
clone	克隆一个 ActiveSelection 实例。
toObject	返回组的普通 Object 表示，用于序列化。
toJSON	返回组的 JSON 表示。
toDatalessObject	返回一个不包含数据的对象表示（用于优化）。
toSVG	返回组的 SVG 字符串表示。
toCanvasElement	将组转换为一个 HTMLCanvasElement。
cloneAsImage	将组克隆为一个 fabric.Image 实例。
toDataURL	将组转换为 data URL 字符串。
toBlob	将组转换为一个 Blob 对象。
_fromObject	(静态方法) 从对象数据中异步创建一个实例。

事件、动画与交互

方法名	用途说明
on	添加事件监听器。
off	移除事件监听器。
once	添加一个只执行一次的事件监听器。
fire	触发一个自定义事件。
animate	对组的一个或多个属性执行动画。
onSelect	当对象被选中时调用的回调函数。
onDeselect	当对象被取消选中时调用的回调函数。
shouldStartDragging	判断是否应该开始拖拽行为。
onDragStart	拖拽开始时的回调。
canDrop	判断当前拖拽的对象是否可以被放置在该组上。
renderDragSourceEffect	渲染拖拽源的视觉效果。
renderDropTargetEffect	渲染放置目标的视觉效果。

属性与状态管理

方法名	用途说明
get	获取指定属性的值。
set	设置一个或多个属性的值。
toggle	切换一个布尔属性的值。
rotate	设置组的旋转角度。
scale	等比缩放组。
scaleToWidth / Height	将组缩放到指定的宽度/高度。
dispose	取消动画并清理资源。
isType	检查对象是否是 ActiveSelection 类型。
isDescendantOf	检查组是否是另一个对象的后代。
hasFill / hasStroke	判断组是否有填充或描边。
isNotVisible	判断组是否不可见。
setControlsVisibility	批量设置控制点的可见性。
setControlVisible	设置单个控制点的可见性。
isControlVisible	检查指定控制点是否可见。
forEachControl	遍历所有控制点。
getActiveControl	获取当前激活的控制点。
clearContextTop	清除画布顶层上下文中的特定区域。

层级与关系

判断 ActiveSelection 组与其他对象之间的层级和父子关系。

方法名	用途说明
getAncestors	获取对象的所有祖先。
findCommonAncestors	查找两个对象的共同祖先。
hasCommonAncestors	检查两个对象是否有共同祖先。
isInFrontOf	检查组是否在另一个对象的前面。

6.控件类Control

定义和管理对象上交互控件（如缩放、旋转的控制点）的核心类，对象上那些可以被鼠标或触摸操作的小方块或图标。它定义了控件的位置、大小、外观，以及当用户与它交互时（如按下、拖动、释放）应该执行什么动作。

属性

属性名	用途说明
actionHandler	控件的动作处理器，用于处理控件被拖动时的逻辑（如缩放、旋转）。
actionName	控件将要执行的动作名称（如 'scale'）。这是一个可选属性，Fabric.js 用它来识别用户操作以进行优化。默认为 'scale'。
angle	控件的绘制角度。目前未使用，但已为内部逻辑预留。
cursorStyle	当鼠标悬停在控件上时显示的 CSS 光标样式。如果提供了 cursorStyleHandler 方法，此属性将被忽略。默认为 'crosshair'。
mouseDownHandler	控件的鼠标按下事件处理器，用于处理在控件上按下鼠标时的逻辑。
mouseUpHandler	控件的鼠标释放事件处理器，用于处理在控件上释放鼠标时的逻辑。
offsetX	控件相对于其定义位置的水平偏移量（像素）。正值向右，负值向左。可用于创建不随对象缩放而改变相对位置的控件。默认为 0。
offsetY	控件相对于其定义位置的垂直偏移量（像素）。正值向下，负值向上。默认为 0。
sizeX	控件的宽度。如果为 null，则默认使用对象的 cornerSize。设置时需同时设置 sizeY。
sizeY	控件的高度。如果为 null，则默认使用对象的 cornerSize。设置时需同时设置 sizeX。
touchSizeX	控件触摸区域的宽度。如果为 null，则默认使用对象的 touchCornerSize。设置时需同时设置 touchSizeY。
touchSizeY	控件触摸区域的高度。如果为 null，则默认使用对象的 touchCornerSize。设置时需同时设置 touchSizeX。
transformAnchorPoint	一个对象，定义了变换操作的锚点，包含 x 和 y 两个属性。
visible	一个布尔值，用于跟踪控件的可见性。默认为 true。
withConnection	如果控件有 offsetX 或 offsetY，设置为 true 可以绘制一条线将控件连接到对象的边界框。默认为 false。
x	控件的相对水平位置。0 是对象中心，-0.5 是左边缘，0.5 是右边缘。默认为 0。
y	控件的相对垂直位置。0 是对象中心，-0.5 是上边缘，0.5 是下边缘。默认为 0。

方法

渲染与绘制方法

方法名	用途说明
commonRenderProps	这是一个辅助方法，用于准备画布以渲染控件。它会根据控件的通用属性（如填充色、描边）设置正确的上下文样式，但不执行平移或旋转。
render	控件的主要渲染函数。当此函数运行时，画布上下文是未缩放和未旋转的（仅考虑视网膜屏幕缩放）。所有绘制操作都需要先平移到指定的 left, top 位置。

几何与坐标方法

方法名	用途说明
calcCornerCoords	根据对象的当前状态（如旋转角度、中心点）计算并返回此控件的四个角点坐标。
positionHandler	计算并返回控件在画布上的最终位置点（Point）。

交互与事件方法

方法名	用途说明
cursorStyleHandler	根据控件的 cursorStyle 属性，返回鼠标悬停在控件上时应显示的 CSS 光标样式。
getActionHandler	返回控件的 actionHandler，该处理器负责处理控件被拖动时的逻辑（如缩放、旋转）。
getActionName	返回控件将要执行的动作名称（如 'scale'）。默认实现直接返回 actionName 属性。
getMouseDownHandler	返回控件的 mouseDownHandler，用于处理在控件上按下鼠标时的逻辑。
getMouseUpHandler	返回控件的 mouseUpHandler，用于处理在控件上释放鼠标时的逻辑。
getTransformAnchorPoint	返回一个对象，定义了变换操作的锚点（origin），包含 x 和 y 两个属性。
getVisibility	返回一个布尔值，表示控件当前是否可见。
setVisibility	设置控件的可见性。
shouldActivate	判断控件是否应该被激活。

7.图像FabricImage

属性

属性名	用途说明
cacheKey	用于检索代表此图像的纹理的唯一键。
cropX	从原始图像尺寸开始，在 X 轴上裁剪的像素值。
cropY	从原始图像尺寸开始，在 Y 轴上裁剪的像素值。
filters	应用于此图像的滤镜数组。
imageSmoothing	指示绘制此图像时是否使用图像平滑（抗锯齿）。
minimumScaleTrigger	触发自动调整图像大小的最小缩放因子。0 将禁用自动调整大小。
preserveAspectRatio	定义图像在调整大小时如何保持其宽高比。
resizeFilter	用于在图像缩放时自动调整大小的滤镜。
srcFromAttribute	当调用 getSrc 时，是否从元素的 src 属性中获取值，以支持相对路径。

方法

方法名	用途说明
_toSVG	返回此实例的 SVG 字符串表示形式。
applyFilters	将 filters 数组中定义的滤镜应用到图像上。
applyResizeFilters	应用用于调整图像大小的滤镜。
dispose	清理图像资源，如删除纹理和对元素的引用。
drawCacheOnCanvas	将对象的缓存副本绘制到目标上下文上，并设置图像平滑属性。
getCrossOrigin	获取对应图像元素的 crossOrigin 值。
getElement	返回此实例所基于的图像元素。
getOriginalSize	返回图像的原始尺寸（宽度和高度）。
getSrc	返回图像的来源（src）URL。
getSvgSrc	已弃用，getSrc 的别名。
hasCrop	检查图像是否应用了裁剪（通过检查 cropX, cropY, width, height 的值）。
setElement	为此实例设置一个新的图像元素。如果定义了滤镜，它们会被应用到新图像上。
setSrc	从指定的 URL 加载并设置图像的来源。
shouldCache	决定 FabricImage 是否应该被缓存。图像通常不受益于缓存，但在某些情况下需要。
toBlob	将对象转换为一个 Blob 对象。
toCanvasElement	将对象转换为一个 HTMLCanvasElement 元素。
toDataURL	将对象转换为一个 data URL 字符串。
toString	返回此实例的字符串表示形式。