Fabric.js 画布类完整参考

Fabric.js是一个用于制作交互式的HTML5 Canvas的JavaScript 库，它提供了许多有用的功能和类，其中最核心的之一就是画布类。

本次介绍中，我们将深入Fabric.js的画布类，并完整地介绍它的各种属性和方法。

画布类

画布类是继承自对象类（Object class）的一个类，它提供了许多与Canvas API相似的方法和属性，以方便开发者快速创建和操作画布。

属性

backgroundColor

• 描述：画布的背景颜色
• 类型：string
• 默认值：'' (透明)

backgroundImage

• 描述：画布的背景图片
• 类型：Image 或 Canvas 对象
• 默认值：null

backgroundImageOpacity

• 描述：画布的背景图片透明度
• 类型：number
• 默认值：1

backgroundImageStretch

• 描述：画布的背景图片是否调整大小，如何调整
• 类型：false / 'none' / 'fill' / 'fit' / 'meet' / 'slice'
• 默认值：'none'

clipTo

• 描述：画布的裁剪函数，在此函数内的对象将不会被渲染
• 类型：Function
• 默认值：null

controlsAboveOverlay

• 描述：在渲染画布的同时，是否绘制对象上方的控件
• 类型：boolean
• 默认值：false

enableRetinaScaling

• 描述：是否启用像素缩放以支持高清屏幕
• 类型：boolean
• 默认值：true

FX_DURATION

• 描述：画布的过渡持续时间（以毫秒为单位）
• 类型：number
• 默认值：500

imageSmoothingEnabled

• 描述：是否启用图像平滑处理
• 类型：boolean
• 默认值：true

includeDefaultValues

• 描述：是否在导出时包含对象的默认值
• 类型：boolean
• 默认值：true

overlayColor

• 描述：画布的覆盖颜色
• 类型：string
• 默认值：'' (透明)

overlayImage

• 描述：画布的覆盖图片
• 类型：Image 或 Canvas 对象
• 默认值：null

overlayImageOpacity

• 描述：画布的覆盖图片透明度
• 类型：number
• 默认值：1

renderOnAddRemove

• 描述：是否启用添加或删除对象时自动重新渲染画布
• 类型：boolean
• 默认值：true

stateful

• 描述：是否启用对象状态的管理，该状态包括位置、旋转角度与大小等属性
• 类型：boolean
• 默认值：true

方法

add(object[, ...objectN])

• 描述：将一个或多个对象添加到画布上
• 参数：一到多个对象
• 返回值：画布对象

bringForward(object, intersecting)

• 描述：将指定的对象向前移动至最接近绘图顺序的上层
• 参数：object：目标对象，intersecting：是否仅将对象移到与其相交的上层
• 返回值：画布对象

bringToFront(object)

• 描述：将指定的对象移动到绘图顺序的最顶层
• 参数：object：目标对象
• 返回值：画布对象

calcOffset()

• 描述：重新计算和更新画布的偏移量，以考虑边缘空白和滚动
• 参数：无
• 返回值：画布对象

centerObject(object [,originX, originY])

• 描述：将指定对象居中于画布
• 参数：object：目标对象, originX：X轴中心偏移量，默认值0， originY：Y轴中心偏移量，默认值0
• 返回值：画布对象

clear()

• 描述：将画布上的所有对象删除
• 参数：无
• 返回值：画布对象

complexity()

• 描述：计算画布上所有对象的复杂度总和（取决于点数、线段数、文本长度和字数等）
• 参数：无
• 返回值：数值，所有对象的复杂度总和

discardActiveGroup()

• 描述：取消选择并将所有组中的对象转换为独立对象
• 参数：无
• 返回值：画布对象

dispose()

• 描述：删除画布以释放资源
• 参数：无
• 返回值：无

forEachObject(callback [,context])

• 描述：循环遍历画布上的所有对象，并对每个对象执行回调函数
• 参数：callback：要执行的回调函数，context：回调函数中的上下文对象
• 返回值：画布对象

getActiveGroup()

• 描述：获取当前处于活动状态的组对象
• 参数：无
• 返回值：组对象或null

getActiveObject()

• 描述：获取当前处于活动状态的单个对象
• 参数：无
• 返回值：对象或null

getBackgroundColor()

• 描述：获取画布的背景颜色
• 参数：无
• 返回值：string，画布背景颜色

getCenter()

• 描述：获取画布的中心点坐标
• 参数：无
• 返回值：object，包含x和y的坐标对象

getContext()

• 描述：获取画布的渲染上下文
• 参数：无
• 返回值：object，Canvas渲染上下文对象

getHeight()

• 描述：获取画布的高度（以像素为单位）
• 参数：无
• 返回值：number，画布高度

getObjects()

• 描述：获取画布上的所有对象
• 参数：无
• 返回值：包含所有对象的数组

getWidth()

• 描述：获取画布的宽度（以像素为单位）
• 参数：无
• 返回值：number，画布宽度

insertAt(object, index, nonSplicing)

• 描述：在指定的索引位置上插入一个对象
• 参数：object：目标对象, index：要插入的索引位置, nonSplicing：是否在索引位置插入而不删除其他对象。
• 返回值：画布对象

item(index)

• 描述：获取指定索引处的对象
• 参数：index：目标对象的索引
• 返回值：对象或null

remove(object[, ...objectN])

• 描述：从画布上删除一个或多个对象
• 参数：object：要删除的目标对象，...objectN：其他要删除的对象
• 返回值：画布对象

renderAll([allOnTop])

• 描述：重新渲染所有对象和背景，包括控制点和焦点，如果控制点在对象上方，则在对象下方渲染。 此方法将自动计算新对象的尺寸、位置和缩放，以适应画布的大小。
• 参数：allOnTop：是否在渲染过程中将所有对象移动到最上方
• 返回值：画布对象

sendBackwards(object, intersecting)

• 描述：将指定的对象向后移动至最接近绘图顺序的下层
• 参数：object：目标对象，intersecting：是否仅将对象移到与其相交的下层
• 返回值：画布对象

sendToBack(object)

• 描述：将指定的对象移动到绘图顺序的最底层
• 参数：object：目标对象
• 返回值：画布对象

setOverlayImage(image[, callback[, options]])

• 描述：设置画布覆盖图片和属性
• 参数：image：覆盖的图片对象，callback：覆盖图片处理完毕后要执行的回调函数，options：附加参数对象
• 返回值：画布对象

toActiveSelection()

• 描述：将当前活动对象转换为生效组，可以通过getActiveGroup方法获取
• 参数：无
• 返回值：画布对象

toJSON([propertiesToInclude])

• 描述：将画布上的所有对象转换为JSON格式的字符串
• 参数：propertiesToInclude：要包含在JSON字符串中的对象属性列表
• 返回值：JSON格式的字符串

结语

Fabric.js开发一个完整的交互式Canvas应用程序的能力，这是一个强大的库，它提供了许多易于使用的类和函数。 强烈建议开发者阅读官方文档，以充分发挥Fabric.js所提供的各种可能性。