Fabric.js 中文文档
万水千山走遍TML 2024-09-03 16:35:01 阅读 99
Fabric.js 中文文档
概述
Fabric.js 是一个简单而强大的 JavaScript HTML5 canvas 库，用于处理 canvas 元素上的图形和交互。它提供了一个交互式的对象模型，使开发者能够轻松地在网页上操作 canvas 元素。
配置项
Fabric.js 提供了多种配置项，允许开发者根据需要自定义其行为和外观。
常见配置项
当然，为了更全面地了解Fabric.js的配置项，下面我将补充一些常见的配置项及其说明。请注意，这些配置项通常用于初始化画布(<code>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"> code>
<head>
<meta charset="UTF-8"> code>
<title>Fabric.js Rectangle Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.1/fabric.min.js"></script> code>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c" width="600" height="400"></canvas> code>
<script src="app.js"></script> code>
<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" code>
// 创建一个新的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支持对图片应用各种滤镜效果，如模糊、灰度、色彩调整等。你可以通过filters数组来添加滤镜。
交互性：
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度。
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 });
请注意，不是所有上述方法都是fabric.Image类特有的，其中一些（如set、clone）是继承自fabric.Object的方法。此外，由于Fabric.js是一个活跃的开源项目，其功能可能会随着版本的更新而发生变化，因此建议查阅最新的Fabric.js文档以获取最准确的信息。
图片（Image）示例
// 首先，初始化一个画布
var canvas = new fabric.Canvas('myCanvas'); // 假设你的<canvas>元素有一个id="myCanvas" code>
// 创建一个新的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 的一些基本用法和配置，更多高级功能和细节请参考官方文档。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。