Fabric.js 中文文档
概述
Fabric.js 是一个简单而强大的 JavaScript HTML5 canvas 库,用于处理 canvas 元素上的图形和交互。它提供了一个交互式的对象模型,使开发者能够轻松地在网页上操作 canvas 元素。
配置项
Fabric.js 提供了多种配置项,允许开发者根据需要自定义其行为和外观。
常见配置项
当然,为了更全面地了解Fabric.js的配置项,下面我将补充一些常见的配置项及其说明。请注意,这些配置项通常用于初始化画布(fabric.Canvas
)或画布上的对象(如矩形、圆形、文本等)。
Canvas 配置项
- width:
Number
- 画布的宽度,以像素为单位。 - height:
Number
- 画布的高度,以像素为单位。 - backgroundColor:
String
- 画布的背景颜色。可以使用十六进制颜色代码、CSS颜色名称或RGBA值。 - selectionColor:
String
- 当对象被选中时的高亮颜色。 - selectionLineWidth:
Number
- 选中对象边框的线宽。 - renderOnAddRemove:
Boolean
- 当添加或移除对象时是否自动渲染画布。 - preserveObjectStacking:
Boolean
- 是否保持对象的堆叠顺序。如果为true
,则对象的堆叠顺序将保持不变,即后添加的对象会位于上层。 - selection:
Boolean
- 是否启用对象选择功能。 - multiSelect:
Boolean
- 是否允许多选。如果为true
,用户可以通过拖动鼠标选择多个对象。 - perPixelTargetFind:
Boolean
- 是否启用按像素查找目标的功能。这可以提高选择精度,但可能会影响性能。
方法
Fabric.js 提供了一系列方法来操作画布和画布上的对象。
初始化与创建对象
- new fabric.Canvas(element):创建并初始化一个新的画布。
- new fabric.Rect({ … }):创建矩形对象。
- new fabric.Circle({ … }):创建圆形对象。
- new fabric.Image.fromURL(url, callback):从URL加载图像并创建图像对象。
Canvas 方法
-
初始化与配置
new fabric.Canvas(element, options)
:创建并初始化一个新的画布。element
是一个HTML元素(通常是<canvas>
标签),options
是一个包含配置选项的对象。
-
对象管理
add(object)
:向画布添加图形对象。remove(object)
:从画布中移除指定的图形对象。clear()
:清除画布上的所有图形对象。getActiveObject()
:获取当前活动的(即被选中的)图形对象。getActiveGroup()
:获取当前活动的图形对象组(如果有的话)。deactivateAll()
:取消选择画布上的所有图形对象。deactivateAllWithDispatch()
:与deactivateAll()
类似,但会触发selection:cleared
事件。forEachObject(callback, context)
:遍历画布上的所有图形对象,并对每个对象执行回调函数。
-
渲染与重绘
renderAll()
:重新渲染画布上的所有图形对象。requestRenderAll()
:请求重新渲染画布,但可能会延迟执行以提高性能。renderTop()
:仅渲染画布的顶层对象,通常用于快速更新画布的一小部分。
-
事件处理
on(eventName, callback)
:为画布添加事件监听器。off(eventName, callback)
:移除画布上的事件监听器。fire(eventName, options)
:触发画布上的自定义事件。
-
序列化与反序列化
toJSON([propertiesToInclude])
:将画布上的所有图形对象序列化为JSON字符串。可选的propertiesToInclude
参数用于指定哪些属性应该被包含在序列化结果中。loadFromJSON(json, callback)
:从JSON字符串加载图形对象到画布上。callback
函数在加载完成后被调用。loadFromDatalessJSON(json, callback)
:与loadFromJSON
类似,但用于加载不包含sourcePath
属性的JSON数据(即“无数据源”的JSON)。
-
视图与变换
viewportTransform
:获取或设置画布的视口变换矩阵。calcOffset()
:计算画布相对于其定位容器的偏移量。zoomToPoint(point, value)
:以指定点为中心进行缩放。
-
尺寸与边界
setHeight(height)
和setWidth(width)
:设置画布的宽度和高度。setHeight(height, options)
和setWidth(width, options)
:同上,但允许通过options
参数指定额外的行为(如是否重新渲染画布)。getElement()
:获取画布对应的DOM元素(即<canvas>
标签)。
对象类型
Fabric.js 支持多种对象类型,每种类型都有其特定的用途和配置。
矩形(Rect)
用于在画布上绘制矩形。
以下是矩形(Rect
)对象在Fabric.js中的一些常见配置项和方法。
矩形(Rect)配置项
- left:
Number
- 矩形左上角的X坐标。这决定了矩形在画布上的水平位置。 - top:
Number
- 矩形左上角的Y坐标。这决定了矩形在画布上的垂直位置。 - width:
Number
- 矩形的宽度。单位是像素。 - height:
Number
- 矩形的高度。单位也是像素。 - fill:
String
- 矩形的填充颜色。可以使用十六进制颜色代码、CSS颜色名称或RGBA值。 - stroke:
String
- 矩形边框的颜色。如果设置为null
或undefined
,则不显示边框。 - strokeWidth:
Number
- 矩形边框的线宽。单位是像素。如果stroke
未设置或设置为null
,则此属性无效。 - strokeDashArray:
Array
- 定义矩形边框的虚线模式。例如,[5, 5]
表示边框由5个单位的实线和5个单位的空格交替组成。如果未设置,则边框为实线。 - rx:
Number
- 矩形圆角的X轴半径。如果设置此值,矩形的四个角将变为圆角。 - ry:
Number
- 矩形圆角的Y轴半径。通常与rx
相同以创建圆形角,但也可以单独设置以创建椭圆形角。 - angle:
Number
- 矩形旋转的角度(以度为单位)。正值表示顺时针旋转,负值表示逆时针旋转。 - opacity:
Number
- 矩形的透明度。范围是0(完全透明)到1(完全不透明)。 - selectable:
Boolean
- 矩形是否可选。如果设置为false
,则用户无法通过鼠标点击或拖动来选择该矩形。 - hasControls:
Boolean
- 是否在矩形上显示控制点(用于调整大小、旋转等)。如果设置为false
,则不会显示这些控制点。 - lockMovementX:
Boolean
- 是否锁定矩形在X轴上的移动。如果设置为true
,则用户无法通过拖动来改变矩形的水平位置。 - lockMovementY:
Boolean
- 是否锁定矩形在Y轴上的移动。如果设置为true
,则用户无法通过拖动来改变矩形的垂直位置。
矩形(Rect)方法
-
set({…properties}): 用于同时设置多个属性。接受一个对象作为参数,对象的键是属性名,值是希望设置的新值。
rect.set({ left: 100, top: 100, fill: 'red' });
-
scale(scaleX, scaleY): 按比例缩放矩形。
scaleX
和scaleY
分别是X轴和Y轴的缩放比例。rect.scale(2, 1); // 水平方向放大2倍,垂直方向不变
-
rotate(degree): 旋转矩形指定的度数。正值表示顺时针旋转,负值表示逆时针旋转。
rect.rotate(45); // 顺时针旋转45度
-
moveTo(index): 将矩形移动到画布上对象的指定索引位置。注意,这会影响对象的堆叠顺序。
canvas.moveTo(rect, 0); // 将矩形移动到画布上的第一个位置
-
clone(): 克隆矩形对象,返回一个新的矩形实例,其所有属性都与原始矩形相同,但独立于原始矩形。
const clonedRect = rect.clone(); canvas.add(clonedRect); // 将克隆的矩形添加到画布上
请注意,上述方法是Fabric.js中所有图形对象共有的通用方法的一部分,但矩形(Rect
)对象也有其特定的配置项,如rx
和ry
,用于创建圆角矩形。
矩形(Rect)示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fabric.js Rectangle Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.1/fabric.min.js"></script>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c" width="600" height="400"></canvas>
<script src="app.js"></script>
<script>
// 初始化画布
var canvas = new fabric.Canvas('c');
// 创建一个矩形对象
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red', // 填充颜色
width: 200, // 宽度
height: 100, // 高度
stroke: 'black', // 边框颜色
strokeWidth: 5 // 边框宽度
});
// 将矩形添加到画布上
canvas.add(rect);
</script>
</body>
</html>
圆形(Circle)
用于在画布上绘制圆形。
- 配置项:
以下是圆形(Circle
)对象在Fabric.js中的一些常见配置项和方法
圆形(Circle)配置项
- left:
Number
- 圆心左侧的X坐标。这决定了圆形在画布上的水平位置。 - top:
Number
- 圆心顶部的Y坐标。这决定了圆形在画布上的垂直位置。 - radius:
Number
- 圆形的半径。单位是像素。 - fill:
String
- 圆形的填充颜色。可以使用十六进制颜色代码、CSS颜色名称或RGBA值。 - stroke:
String
- 圆形边框的颜色。如果设置为null
或undefined
,则不显示边框。 - strokeWidth:
Number
- 圆形边框的线宽。单位是像素。如果stroke
未设置或设置为null
,则此属性无效。 - strokeDashArray:
Array
- 定义圆形边框的虚线模式。与矩形相同,如果未设置,则边框为实线。 - startAngle:
Number
- 圆形起始绘制角度(以弧度为单位)。用于创建扇形等形状。 - endAngle:
Number
- 圆形结束绘制角度(以弧度为单位)。与startAngle
一起使用以定义扇形的角度范围。 - originX/originY:
String
- 控制对象缩放的基点。默认为'center'
,表示缩放时围绕圆心进行。 - opacity:
Number
- 圆形的透明度。范围是0(完全透明)到1(完全不透明)。 - selectable:
Boolean
- 圆形是否可选。 - hasControls:
Boolean
- 是否在圆形上显示控制点。 - lockScalingFlip:
Boolean
- 缩放时是否允许翻转。对于圆形来说,这通常不是必要的,因为圆形是对称的。
圆形(Circle)方法
在Fabric.js中,圆形(fabric.Circle
)对象继承自fabric.Object
,因此它拥有fabric.Object
及其父类定义的所有方法。不过,对于圆形来说,并没有特定的、专为其设计的方法,因为其操作(如移动、缩放、旋转等)都是通过继承自fabric.Object
的方法来实现的。
-
set(property, value) 或 set({…properties})
- 用于设置对象的属性。可以接受单个属性和值作为参数,或者一个包含多个属性和值的对象。
-
get(property)
- 用于获取对象的某个属性值。
-
moveTo(left, top)
- 将对象移动到画布上的指定位置。
-
scale(scaleX, scaleY)
- 按指定比例缩放对象。如果只提供一个参数,则默认在X和Y方向上进行等比例缩放。
-
scaleToWidth(width) 和 scaleToHeight(height)
- 分别将对象缩放到指定的宽度或高度,保持对象的宽高比不变。
-
rotate(angle)
- 按指定角度旋转对象。角度以度为单位,正值表示顺时针旋转,负值表示逆时针旋转。
-
skew(x, y)
- 对对象进行倾斜变换。参数
x
和y
分别表示在X轴和Y轴方向上的倾斜角度(以度为单位)。
- 对对象进行倾斜变换。参数
-
flipX() 和 flipY()
- 分别在X轴或Y轴上翻转对象。
-
setOpacity(opacity)
- 设置对象的透明度。透明度值应该在0(完全透明)到1(完全不透明)之间。
-
setCoords()
- 手动更新对象的坐标缓存。这通常是在对象的位置、尺寸或形状发生变化后调用的,以确保进一步的交互(如拖动、缩放)能够正确进行。
-
toObject([propertiesToInclude])
- 将对象序列化为一个JSON对象。可以接受一个可选的参数来指定要序列化的属性。
-
toSVG()
- 将对象导出为SVG格式的字符串。
需要注意的是,圆形对象的一些属性(如radius
、startAngle
、endAngle
)在调用某些方法(如scale
、rotate
)时可能会被自动更新,以反映对象当前的状态。
对于圆形特有的操作,主要是通过设置startAngle
和endAngle
属性来创建扇形形状,但这并不是通过特定的方法实现的,而是通过直接设置属性来完成的。此外,圆形对象也可以使用fabric.Canvas
提供的方法来与其他对象进行交互,如选择、拖动、分组等。
创建扇形示例
要创建一个扇形而不是完整的圆形,你可以设置startAngle
和endAngle
属性。请注意,这些角度是以弧度为单位的,因此你可能需要使用Math.PI
(π的弧度值)来计算所需的角度。
// 初始化画布
var canvas = new fabric.Canvas('c');
// 创建一个扇形(作为圆形的一部分)
var sector = new fabric.Circle({
left: 100,
top: 100,
radius: 100,
fill: 'none', // 无填充颜色
stroke: 'red', // 边框颜色为红色
strokeWidth: 5, // 边框宽度为5像素
startAngle: -Math.PI / 4, // 从-45度(π/4弧度)开始
endAngle: Math.PI / 2, // 到90度结束(π/2弧度)
originX: 'center', // 缩放基点为圆心
originY: 'center'
});
// 将扇形添加到画布上
canvas.add(sector);
在这个例子中,我们创建了一个fabric.Circle
对象,但通过设置startAngle
和endAngle
属性,我们实际上创建了一个扇形而不是完整的圆形。我们还设置了无填充颜色(fill: 'none'
),以便只显示边框。这样,我们就得到了一个红色的扇形。
文本(Text)
用于在画布上添加文本。
- 配置项:
在Fabric.js中,fabric.Text
对象的配置项允许你高度自定义文本的外观和行为。以下是一些关键的配置项列表,它们允许你详细指定文本的各个方面:
文本(Text)配置项
- text:
String
- 要显示在画布上的文本内容。 - fontSize:
Number
- 文本的字体大小,以像素为单位。 - fontFamily:
String
- 文本的字体族。可以指定具体的字体名称,如"Arial", "Times New Roman"等。 - fontWeight:
String
- 文本的字体粗细,如"normal"(正常)、“bold”(粗体)等。 - fontStyle:
String
- 文本的字体样式,如"normal"(正常)、“italic”(斜体)等。 - fill:
String
- 文本的颜色,可以是十六进制颜色代码(如"#FF0000")、颜色名称(如"red")或RGBA值(如"rgba(255, 0, 0, 0.5)")。 - stroke:
String
- 文本的描边颜色,与fill
相同,可以是十六进制颜色代码、颜色名称或RGBA值。如果未设置或设置为null
,则不显示描边。 - strokeWidth:
Number
- 文本描边的线宽,以像素为单位。 - textAlign:
String
- 文本的水平对齐方式,可以是"left"(左对齐)、“center”(居中对齐)、“right”(右对齐)或"justify"(两端对齐,但Fabric.js可能不完全支持此对齐方式)。 - lineHeight:
Number
- 文本的行高,控制文本行之间的垂直间距。通常与fontSize
相关。 - textBackgroundColor:
String
- 文本的背景色,与fill
属性相同,用于设置文本背后的颜色或渐变。 - left:
Number
- 文本左侧边缘的X坐标。 - top:
Number
- 文本顶部边缘的Y坐标。 - originX/originY:
String
- 定义对象位置的基点,可以是"left"、“center”、“right”、“top”、"bottom"或数值(相对于对象的宽度或高度)。这影响对象的定位方式。 - visible:
Boolean
- 控制文本对象是否可见。 - editable:
Boolean
- 指定文本对象是否可编辑。如果设置为true
,则允许用户通过输入框直接编辑文本内容。 - selectable:
Boolean
- 控制文本对象是否可选。如果设置为true
,则允许用户通过鼠标拖动选择文本。 - hasControls:
Boolean
- 控制对象边界框上是否显示控制手柄,允许用户通过拖动这些手柄来变换对象。 - width:
Number
- 可以设置文本的固定宽度,这会影响文本的换行和布局。 - charSpacing:
Number
- 字符间距,以像素为单位,用于调整字符之间的水平间距。
请注意,虽然这里列出了许多配置项,但并不是所有配置项都必须在创建文本对象时指定。你可以根据需要设置必要的配置项,以满足你的布局和设计需求。同时,由于Fabric.js的版本更新,可能会有新的配置项被添加或旧的配置项被弃用,因此建议查阅最新的Fabric.js文档以获取最准确的信息。
文本(Text)方法
在Fabric.js中,fabric.Text
对象继承自fabric.Object
,因此它拥有fabric.Object
提供的所有方法,同时也拥有一些特定于文本的方法。以下是一些常见的fabric.Text
方法:
-
setText(text: string): 设置文本内容。
- 参数:
text
(字符串) - 新的文本内容。
- 参数:
-
setFontSize(fontSize: number): 设置文本的字体大小。
- 参数:
fontSize
(数字) - 新的字体大小(以像素为单位)。
- 参数:
-
setFontFamily(fontFamily: string): 设置文本的字体族。
- 参数:
fontFamily
(字符串) - 新的字体族名称。
- 参数:
-
setFontWeight(fontWeight: string): 设置文本的字体粗细。
- 参数:
fontWeight
(字符串) - 如"bold"、"normal"等。
- 参数:
-
setFontStyle(fontStyle: string): 设置文本的字体样式。
- 参数:
fontStyle
(字符串) - 如"italic"、"normal"等。
- 参数:
-
setFill(color: string): 设置文本的填充颜色。
- 参数:
color
(字符串) - 十六进制颜色代码、颜色名称或RGBA值。
- 参数:
-
setStroke(color: string, width: number, lineCap?: string, lineJoin?: string): 设置文本的描边颜色、线宽、线帽样式和线连接样式。
- 参数:
color
(字符串):描边颜色。width
(数字):描边线宽。lineCap
(可选,字符串):线帽样式,如"butt"、“round”、“square”。lineJoin
(可选,字符串):线连接样式,如"miter"、“round”、“bevel”。
- 参数:
-
setTextAlign(alignment: string): 设置文本的水平对齐方式。
- 参数:
alignment
(字符串) - 如"left"、“center”、“right”。
- 参数:
-
setLineHeight(lineHeight: number): 设置文本的行高。
- 参数:
lineHeight
(数字) - 新的行高值。
- 参数:
-
setTextBackgroundColor(color: string): 设置文本的背景色。
- 参数:
color
(字符串) - 十六进制颜色代码、颜色名称或RGBA值。
- 参数:
-
setEditable(editable: boolean): 设置文本是否可编辑。
- 参数:
editable
(布尔值) - 如果为true
,则文本可编辑。
- 参数:
-
fromObject(object: Object, callback?: Function): 使用JSON对象创建一个新的
fabric.Text
实例。这个方法主要用于从序列化数据中恢复文本对象。- 参数:
object
(对象):包含文本对象属性的JSON对象。callback
(可选,函数):在对象创建后调用的回调函数。
- 参数:
-
toObject([propertiesToInclude]): 将文本对象序列化为JSON对象。可以指定要包含的属性。
- 参数:
propertiesToInclude
(可选,数组/字符串):指定要序列化的属性名称列表或通配符(如'*'
)以包含所有属性。
- 参数:
请注意,由于Fabric.js的API可能会随着版本的更新而发生变化,因此建议查阅最新的Fabric.js文档以获取最准确的信息。
此外,fabric.Text
还继承了fabric.Object
的所有方法,如set
、get
、moveTo
、scale
、rotate
等,这些方法允许你对文本对象进行更广泛的变换和操作。
文本(Text)示例
// 首先,初始化一个画布
var canvas = new fabric.Canvas('myCanvas'); // 假设你的<canvas>元素有一个id="myCanvas"
// 创建一个新的fabric.Text实例
var textSample = new fabric.Text('Hello, world!', {
left: 100, // 文本左侧的位置
top: 100, // 文本顶部的位置
fontSize: 30, // 文本字体大小
fill: '#333', // 文本颜色
fontFamily: 'arial' // 文本字体
});
// 将文本对象添加到画布上
canvas.add(textSample);
图片(Image)
用于在画布上添加图片。
- 配置项:
在Fabric.js中,fabric.Image
对象继承自fabric.Object
,因此它具有许多可以配置的属性和方法。以下是一些常见的fabric.Image
配置选项,这些选项可以在创建或修改fabric.Image
实例时设置:
图片(Image)配置项
-
基本属性:
left
:图片的左边界位置。top
:图片的上边界位置。width
:图片的宽度(如果设置了,则图片会被缩放以适应此宽度)。height
:图片的高度(如果设置了,则图片会被缩放以适应此高度)。scaleX
:图片在X轴方向上的缩放比例。scaleY
:图片在Y轴方向上的缩放比例。
-
旋转与倾斜:
angle
:图片旋转的角度(以度为单位)。skewX
:图片在X轴方向上的倾斜角度。skewY
:图片在Y轴方向上的倾斜角度。
-
位置与对齐:
originX
、originY
:控制图片缩放和旋转的基点。可以是'left'
、'center'
或'right'
(对于originX
)和'top'
、'center'
或'bottom'
(对于originY
)。centeredRotation
:如果为true
,则旋转将围绕图片的中心点进行。
-
样式:
opacity
:图片的透明度(0到1之间的值)。fill
:虽然通常用于设置颜色,但在fabric.Image
中通常不直接设置,因为图片本身具有颜色。但可以通过滤镜(如BlendColor
)来改变图片的颜色。stroke
:图片边框的颜色和宽度。虽然通常不给图片设置边框,但这个属性是存在的。strokeWidth
:图片边框的宽度。
-
剪裁与裁剪:
- 在Fabric.js中,虽然
fabric.Image
对象本身没有直接的裁剪属性,但你可以通过其他方式(如使用clipPath
)来实现裁剪效果。
- 在Fabric.js中,虽然
-
滤镜:
- Fabric.js支持对图片应用各种滤镜效果,如模糊、灰度、色彩调整等。你可以通过
filters
数组来添加滤镜。
- Fabric.js支持对图片应用各种滤镜效果,如模糊、灰度、色彩调整等。你可以通过
-
交互性:
selectable
:如果为true
,则图片可以被选中并进行移动、缩放等操作。evented
:如果为true
,则图片将触发事件(如点击、移动等)。
-
其他:
crossOrigin
:处理跨域图片时使用的CORS设置。src
:图片的源URL(注意,在直接使用new fabric.Image
构造函数时通常不设置此属性,而是通过fabric.Image.fromURL
方法加载图片)。
请注意,当你使用fabric.Image.fromURL
方法来加载图片时,一些属性(如left
、top
、width
、height
等)可以在回调函数中设置,因为此时图片对象已经被创建但尚未添加到画布上。
以下是一个设置图片配置的例子:
fabric.Image.fromURL('path/to/your-image.jpg', function(img) {
// 设置图片的基本属性
img.set({
left: 100,
top: 100,
angle: 30, // 旋转30度
scaleX: 0.8, // 在X轴上缩小到80%
scaleY: 1.2, // 在Y轴上放大到120%
opacity: 0.7, // 设置透明度
selectable: true, // 允许选中图片
evented: true, // 允许图片触发事件
// 可以继续添加其他属性...
});
// 添加滤镜(例如,灰度滤镜)
img.filters.push(new fabric.ColorMatrix({
type: 'grayscale'
}));
img.applyFilters(); // 应用滤镜
// 将图片添加到画布
canvas.add(img);
});
在这个例子中,我们使用fabric.Image.fromURL
来加载图片,并在回调函数中设置了多个配置属性,包括位置、旋转、缩放、透明度、可选性和事件性。此外,我们还添加了一个灰度滤镜并应用到图片上。
图片(Image)方法
在Fabric.js中,fabric.Image
对象继承自fabric.Object
,因此它拥有许多内置的方法,这些方法可以用于操作图片对象。以下是一些常用的fabric.Image
方法:
-
set(property, value)
:- 用于设置图片对象的属性。如果传入一个对象,则可以一次性设置多个属性。
- 示例:
img.set({ left: 100, top: 100 });
-
scale(sX, sY)
:- 用于按给定的比例缩放图片对象。
sX
是X轴方向上的缩放比例,sY
是Y轴方向上的缩放比例。 - 注意:这个方法会直接修改对象的
scaleX
和scaleY
属性。 - 示例:
img.scale(0.5, 0.5);
// 将图片在X和Y方向上缩小到原来的一半大小。
- 用于按给定的比例缩放图片对象。
-
rotate(angle)
:- 用于旋转图片对象。
angle
是旋转的角度(以度为单位)。正值表示顺时针旋转,负值表示逆时针旋转。 - 注意:这个方法会直接修改对象的
angle
属性。 - 示例:
img.rotate(45);
// 将图片顺时针旋转45度。
- 用于旋转图片对象。
-
moveTo(left, top)
:- 用于移动图片对象到画布上的指定位置。
left
和top
分别表示新位置的X和Y坐标。 - 注意:这个方法会直接修改对象的
left
和top
属性。 - 示例:
img.moveTo(150, 200);
- 用于移动图片对象到画布上的指定位置。
-
skewX(angle)
和skewY(angle)
:- 分别用于在X轴和Y轴方向上倾斜图片对象。
angle
是倾斜的角度(以度为单位)。 - 注意:这些方法会直接修改对象的
skewX
和skewY
属性。 - 示例:
img.skewX(10);
// 在X轴方向上倾斜图片10度。
- 分别用于在X轴和Y轴方向上倾斜图片对象。
-
setCoords()
:- 用于更新图片对象的边界框坐标。这个方法通常在手动修改图片位置、大小或旋转等属性后调用,以确保边界框正确反映对象的当前状态。
- 示例:
img.set({ left: 200 }).setCoords();
-
moveToCenter()
:- 将图片对象移动到画布的中心位置。注意,这个方法可能不是
fabric.Image
类直接提供的方法,但可以通过设置left
和top
属性为画布中心位置的值来模拟这一行为。 - 示例(模拟):
img.set({ left: canvas.width / 2, top: canvas.height / 2 });
- 将图片对象移动到画布的中心位置。注意,这个方法可能不是
-
clone(deep)
:- 用于克隆图片对象。
deep
参数指定是否进行深克隆(包括对象的所有子对象)。对于fabric.Image
,通常不需要深克隆,因为图片对象通常不包含子对象。 - 示例:
var clonedImg = img.clone();
- 用于克隆图片对象。
-
toDataURL(options)
:- 用于将图片对象导出为DataURL格式。
options
是一个对象,可以包含多个选项,如格式(format
)、质量(quality
,仅JPEG格式有效)等。 - 示例:
var dataURL = img.toDataURL({ format: 'png', quality: 0.8 });
- 用于将图片对象导出为DataURL格式。
请注意,不是所有上述方法都是fabric.Image
类特有的,其中一些(如set
、clone
)是继承自fabric.Object
的方法。此外,由于Fabric.js是一个活跃的开源项目,其功能可能会随着版本的更新而发生变化,因此建议查阅最新的Fabric.js文档以获取最准确的信息。
图片(Image)示例
// 首先,初始化一个画布
var canvas = new fabric.Canvas('myCanvas'); // 假设你的<canvas>元素有一个id="myCanvas"
// 创建一个新的fabric.Image实例
fabric.Image.fromURL('path/to/your-image.jpg', function(img) {
// 设置图片的位置和大小
img.set({
left: 100,
top: 100,
angle: 30, // 可选:旋转角度
opacity: 0.85 // 可选:透明度
});
// 将图片对象添加到画布上
canvas.add(img);
});
事件
Fabric.js 提供了丰富的事件来处理用户的交互,如选择、移动、缩放等。
Fabric.js常见事件
-
object:added
:当对象被添加到画布上时触发。 -
object:removed
:当对象从画布中移除时触发。 -
object:moving
:当对象正在移动时触发。这通常发生在鼠标拖动对象时。 -
object:scaling
:当对象正在被缩放时触发。 -
object:rotating
:当对象正在被旋转时触发。 -
object:modified
:当对象的属性(如位置、尺寸、角度等)被修改时触发。 -
object:selected
:当对象被选中时触发。 -
object:deselected
:当对象被取消选中时触发。 -
selection:created
:当一个新的选择集被创建时触发。 -
selection:updated
:当选择集中的对象发生变化时触发。 -
selection:cleared
:当选择集被清除时触发,即没有任何对象被选中时。 -
path:created
:当一个新的路径对象被创建时触发。 -
mouse:down
、mouse:up
、mouse:move
、mouse:over
、mouse:out
:这些是与鼠标事件相关的事件,用于监听画布上的鼠标活动。 -
before:selection:cleared
、before:selection:created
、before:object:modified
等带有before:
前缀的事件:这些事件在对应操作发生之前触发,允许你在操作实际执行之前进行干预或取消操作。
总结
Fabric.js 是一个功能强大的 canvas 库,它提供了一套丰富的 API 来操作 canvas 元素和上面的对象。通过配置项、方法和事件,开发者可以轻松地在网页上实现复杂的图形和交互设计。上述文档简要介绍了 Fabric.js 的一些基本用法和配置,更多高级功能和细节请参考官方文档。