Fabric.js 中文文档

最新推荐文章于 2025-04-23 18:00:00 发布

置顶

万水千山走遍TML

最新推荐文章于 2025-04-23 18:00:00 发布

阅读量6.9k

点赞数 12

本文链接：https://blog.youkuaiyun.com/weixin_44885062/article/details/140802933

版权

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); // 将克隆的矩形添加到画布上
```