- 📢欢迎点赞 ：👍 收藏 ⭐留言 📝 如有错误敬请指正，赐人玫瑰，手留余香！
- 📢本文作者：由webmote 原创
- 📢作者格言：新的征程，用爱发电，去丈量人心，是否能达到人机合一？
Fabric.js 入门教程：扩展自定义对象的完整实践
Fabric.js 是一个功能强大的 HTML5 Canvas 库，用于构建交互式、可编辑的图形应用程序。本篇文章将通过逐步扩展 Fabric.js 的对象，创建一个名为 ComNode 的自定义节点组件，帮助读者从入门到精通 Fabric.js 的对象扩展功能。
这里有教程，可以随时收藏翻阅，一个V6版本的中文档手册，目前目录如下，大家可以点击 FabricJS.cc 访问， 下面全部代码可在 FabricJs playground 内访问。
一、基础概念与准备
Fabric.js 提供了一个基础框架，可以扩展它的内置对象，如 Rect（矩形）、Circle（圆形）等。在这篇文章中，我们将基于 Rect 扩展一个新的对象，ComNode，它包含以下功能：
- 额外的
icon属性。 - 支持自定义控制点（Anchors）。
- 可序列化和反序列化。
环境准备
确保你已经安装 Fabric.js：
npm install fabric
在代码中引入 Fabric.js 和基础模块：
import {classRegistry,Control,ObjectEvents,Rect,RectProps,SerializedRectProps,TClassProperties,TOptions,
} from 'fabric';
二、构造自定义对象 ComNode
1. 定义对象的属性
Fabric.js 使用属性作为核心控制点。我们将添加 icon 属性：
interface UniqueComNodeProps {icon: string; // 自定义属性
}
同时，定义序列化所需的扩展接口：
export interface SerializedComNodePropsextends SerializedRectProps,UniqueComNodeProps {}
2. 设置默认值
通过静态属性为新对象设定默认值：
export const comNodeDefaultValues: Partial<TClassProperties<ComNode>> = {icon: '',
};
3. 创建 ComNode 类
接下来，创建一个继承自 Rect 的类：
export class ComNode<Props extends TOptions<ComNodeProps> = Partial<ComNodeProps>,SProps extends SerializedComNodeProps = SerializedComNodeProps,EventSpec extends ObjectEvents = ObjectEvents>extends Rect<Props, SProps, EventSpec>implements RectProps {declare icon: string;static type = 'ComNode';static cacheProperties = [...Rect.cacheProperties, 'icon'];constructor(options?: Props) {super();Object.assign(this,ComNode.ownDefaults,(this.constructor as typeof ComNode).createAnchors());this.setOptions(options);}setIcon(value: string) {this.icon = value;}getIcon(): string {return this.get('icon');}
}
这里的 constructor 初始化了默认属性和控制点（Anchors）。
三、添加控制点与方法
1. 创建自定义控制点
Fabric.js 提供了控制点功能，可以通过 AnchorControl 定义。示例中使用静态方法 createAnchors 创建默认控制点：
static createAnchors(): { anchors: Record<string, AnchorControl> } {return { anchors: createObjectDefaultControls() };
}
2. 自定义渲染逻辑
覆盖 _render 方法，在节点绘制时自定义渲染逻辑：
_render(ctx: CanvasRenderingContext2D) {super._render(ctx);// 在这里添加图标或其他绘制逻辑
}
四、实现序列化和反序列化
1. 序列化
Fabric.js 对象的序列化通过 toObject 方法实现：
toObject<SerializedComNodeProps>(propertiesToInclude: string[] = []
): SerializedComNodeProps {return super.toObject([...propertiesToInclude, 'icon']);
}
2. 反序列化
通过 fromObject 实现反序列化：
static fromObject<T extends TOptions<SerializedComNodeProps>>(object: T) {return super._fromObject<ComNode>(object);
}
五、注册到 ClassRegistry
Fabric.js 使用 classRegistry 注册扩展对象：
classRegistry.setClass(ComNode);
这样，我们可以在项目中直接使用 ComNode。
六、完整代码与使用示例
以下是完整代码：
// 导入依赖
import {classRegistry,Control,ObjectEvents,Rect,RectProps,SerializedRectProps,TClassProperties,TOptions,
} from 'fabric';
import { AnchorControl, createObjectDefaultControls } from './AnchorControl';// 定义属性
interface UniqueComNodeProps {icon: string;
}export interface SerializedComNodePropsextends SerializedRectProps,UniqueComNodeProps {}export class ComNode<...> extends Rect {...
}// 注册类
classRegistry.setClass(ComNode);
使用示例
在 Canvas 中实例化：
const canvas = new fabric.Canvas('canvas');const node = new ComNode({left: 100,top: 100,width: 50,height: 50,icon: '📦',fill: 'blue',
});canvas.add(node);
七、总结
通过扩展 Rect，我们实现了一个功能丰富的自定义节点组件 ComNode，并具备以下特性：
- 自定义属性（如
icon）。 - 灵活的控制点机制。
- 序列化与反序列化支持。
Fabric.js 的设计使得扩展对象变得简单，同时可以与其原生功能无缝集成。希望本文能为你提供一个清晰的 Fabric.js 入门思路，帮助你创建更多强大的图形组件！
你学废了吗？
👓都看到这了，还在乎点个赞吗？
👓都点赞了，还在乎一个收藏吗？
👓都收藏了，还在乎一个评论吗？