601 lines
16 KiB
Markdown
601 lines
16 KiB
Markdown
# Meta2D引擎作用详解
|
||
|
||
## 🤔 您的疑问：Meta2D到底做了什么？
|
||
|
||
您的观察很准确！确实，具体的绘制操作都是通过HTML5 Canvas原生API实现的。那么Meta2D引擎到底在做什么呢？
|
||
|
||
**简单类比**：如果说Canvas API是"画笔和颜料"，那么Meta2D就是"画师的大脑和手" - 它决定什么时候画、画在哪里、画什么样式，以及如何响应用户的操作。
|
||
|
||
---
|
||
|
||
## 🎯 Meta2D引擎的核心作用
|
||
|
||
Meta2D引擎并不是替代Canvas API，而是在Canvas API之上构建了一个完整的**图形管理和渲染框架**。它的主要作用包括：
|
||
|
||
### 1. 🎨 渲染管理系统
|
||
|
||
```typescript
|
||
// 我们只需要注册绘制函数
|
||
this.registerCanvasDraw({
|
||
point: drawPoint,
|
||
line: drawLine,
|
||
area: drawArea,
|
||
robot: drawRobot,
|
||
});
|
||
|
||
// Meta2D会自动调用这些函数
|
||
```
|
||
|
||
**Meta2D负责**：
|
||
|
||
- **何时渲染**：自动检测数据变化，决定何时重绘
|
||
- **渲染顺序**：管理图层顺序，确保正确的绘制层级
|
||
- **性能优化**：只重绘需要更新的部分，避免全量重绘
|
||
- **调用时机**：在正确的时机调用我们的绘制函数
|
||
|
||
### 2. 🎮 图形对象管理
|
||
|
||
```typescript
|
||
// 创建一个点位 - 我们只需要定义数据结构
|
||
const pen: MapPen = {
|
||
id: 'point1',
|
||
name: 'point',
|
||
x: 100,
|
||
y: 100,
|
||
width: 24,
|
||
height: 24,
|
||
point: { type: MapPointType.普通点 },
|
||
};
|
||
|
||
// Meta2D会管理这个对象的整个生命周期
|
||
await this.addPen(pen, false, true, true);
|
||
```
|
||
|
||
**Meta2D负责**：
|
||
|
||
- **对象存储**：维护所有图形对象的数据结构
|
||
- **坐标转换**：从逻辑坐标转换为屏幕坐标
|
||
- **状态管理**：追踪每个对象的状态（选中、激活、可见等）
|
||
- **生命周期**：管理对象的创建、更新、删除
|
||
|
||
### 3. 🖱️ 事件处理系统
|
||
|
||
```typescript
|
||
// 我们只需要监听高级事件
|
||
this.on('click', (e, data) => {
|
||
// Meta2D已经处理了鼠标点击的复杂逻辑
|
||
console.log('点击了图形：', data);
|
||
});
|
||
```
|
||
|
||
**Meta2D负责**：
|
||
|
||
- **事件捕获**：监听原生DOM事件（mousedown、mousemove、mouseup等）
|
||
- **坐标转换**：将屏幕坐标转换为画布坐标
|
||
- **碰撞检测**：判断点击了哪个图形对象
|
||
- **事件分发**：将事件分发给正确的处理器
|
||
|
||
### 4. 📐 坐标系统管理
|
||
|
||
```typescript
|
||
// 我们在绘制函数中使用的坐标
|
||
const { x, y, width, height } = pen.calculative?.worldRect ?? {};
|
||
```
|
||
|
||
**Meta2D负责**：
|
||
|
||
- **坐标计算**：自动计算`worldRect`（世界坐标）
|
||
- **缩放处理**：处理画布缩放时的坐标转换
|
||
- **视口管理**：管理可视区域和裁剪
|
||
- **变换矩阵**：处理复杂的坐标变换
|
||
|
||
---
|
||
|
||
## 🔄 Meta2D的工作流程
|
||
|
||
### 1. 初始化阶段
|
||
|
||
```typescript
|
||
export class EditorService extends Meta2d {
|
||
constructor(container: HTMLDivElement) {
|
||
// 1. 创建Meta2D实例，传入配置
|
||
super(container, EDITOR_CONFIG);
|
||
|
||
// 2. 注册自定义绘制函数
|
||
this.#register();
|
||
|
||
// 3. 监听事件
|
||
this.on('*', (e, v) => this.#listen(e, v));
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 图形创建阶段
|
||
|
||
```typescript
|
||
// 用户调用
|
||
await this.addPoint({ x: 100, y: 100 }, MapPointType.普通点);
|
||
|
||
// Meta2D内部流程：
|
||
// 1. 创建图形对象数据结构
|
||
// 2. 分配唯一ID
|
||
// 3. 计算坐标和尺寸
|
||
// 4. 添加到图形列表
|
||
// 5. 触发重绘
|
||
```
|
||
|
||
### 3. 渲染阶段
|
||
|
||
```typescript
|
||
// Meta2D的渲染循环（简化版）
|
||
function render() {
|
||
// 1. 清空画布
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
||
// 2. 遍历所有图形对象
|
||
for (const pen of this.store.data.pens) {
|
||
// 3. 计算世界坐标
|
||
this.updateWorldRect(pen);
|
||
|
||
// 4. 调用对应的绘制函数
|
||
const drawFn = this.canvasDrawMap[pen.name]; // 获取我们注册的绘制函数
|
||
if (drawFn) {
|
||
drawFn(ctx, pen); // 调用 drawPoint、drawLine 等
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 4. 事件处理阶段
|
||
|
||
```typescript
|
||
// 用户点击画布
|
||
canvas.addEventListener('click', (e) => {
|
||
// Meta2D内部处理：
|
||
// 1. 获取点击坐标
|
||
const point = { x: e.offsetX, y: e.offsetY };
|
||
|
||
// 2. 转换为画布坐标
|
||
const worldPoint = this.screenToWorld(point);
|
||
|
||
// 3. 碰撞检测 - 判断点击了哪个图形
|
||
const hitPen = this.hitTest(worldPoint);
|
||
|
||
// 4. 触发相应事件
|
||
if (hitPen) {
|
||
this.emit('click', e, hitPen);
|
||
}
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 Meta2D的核心价值
|
||
|
||
### 1. 抽象层次提升
|
||
|
||
```typescript
|
||
// 没有Meta2D，我们需要手动处理：
|
||
canvas.addEventListener('mousedown', (e) => {
|
||
// 计算点击坐标
|
||
// 检测点击了哪个图形
|
||
// 处理拖拽逻辑
|
||
// 重绘画布
|
||
// ... 大量底层代码
|
||
});
|
||
|
||
// 有了Meta2D，我们只需要：
|
||
this.on('mousedown', (e, pen) => {
|
||
// 直接处理业务逻辑
|
||
console.log('点击了图形:', pen.id);
|
||
});
|
||
```
|
||
|
||
### 2. 数据驱动渲染
|
||
|
||
```typescript
|
||
// 数据变化自动触发重绘
|
||
this.setValue({ id: 'point1', x: 200 }); // Meta2D会自动重绘
|
||
```
|
||
|
||
### 3. 复杂交互支持
|
||
|
||
```typescript
|
||
// 选择、拖拽、缩放、旋转等复杂交互
|
||
this.active(['point1', 'point2']); // 多选
|
||
this.inactive(); // 取消选择
|
||
this.delete([pen]); // 删除图形
|
||
```
|
||
|
||
### 4. 性能优化
|
||
|
||
- **脏矩形重绘**：只重绘变化的区域
|
||
- **离屏渲染**：复杂图形使用离屏Canvas
|
||
- **层级管理**：合理的图层分离
|
||
- **事件优化**：高效的碰撞检测算法
|
||
|
||
---
|
||
|
||
## 🏗️ 架构分层对比
|
||
|
||
### 传统Canvas开发
|
||
|
||
```
|
||
┌─────────────────────┐
|
||
│ 业务逻辑层 │
|
||
├─────────────────────┤
|
||
│ 手动管理层 │ ← 需要自己实现
|
||
│ (对象管理/事件/渲染) │
|
||
├─────────────────────┤
|
||
│ Canvas 2D API │
|
||
├─────────────────────┤
|
||
│ 浏览器引擎 │
|
||
└─────────────────────┘
|
||
```
|
||
|
||
### 使用Meta2D
|
||
|
||
```
|
||
┌─────────────────────┐
|
||
│ 业务逻辑层 │ ← 我们专注于这里
|
||
├─────────────────────┤
|
||
│ Meta2D 引擎 │ ← 引擎处理复杂逻辑
|
||
├─────────────────────┤
|
||
│ Canvas 2D API │ ← 底层绘制API
|
||
├─────────────────────┤
|
||
│ 浏览器引擎 │
|
||
└─────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 实际代码示例
|
||
|
||
### 没有Meta2D的代码（复杂）
|
||
|
||
```typescript
|
||
class ManualCanvas {
|
||
private pens: MapPen[] = [];
|
||
private selectedPens: MapPen[] = [];
|
||
|
||
constructor(private canvas: HTMLCanvasElement) {
|
||
this.canvas.addEventListener('click', this.onClick.bind(this));
|
||
this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
|
||
// ... 更多事件监听
|
||
}
|
||
|
||
onClick(e: MouseEvent) {
|
||
const rect = this.canvas.getBoundingClientRect();
|
||
const x = e.clientX - rect.left;
|
||
const y = e.clientY - rect.top;
|
||
|
||
// 手动碰撞检测
|
||
for (const pen of this.pens) {
|
||
if (this.isPointInPen(x, y, pen)) {
|
||
this.selectPen(pen);
|
||
this.render(); // 手动重绘
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const ctx = this.canvas.getContext('2d')!;
|
||
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||
|
||
// 手动绘制每个图形
|
||
for (const pen of this.pens) {
|
||
this.drawPen(ctx, pen);
|
||
}
|
||
}
|
||
|
||
// ... 大量的手动管理代码
|
||
}
|
||
```
|
||
|
||
### 使用Meta2D的代码（简洁）
|
||
|
||
```typescript
|
||
class EditorService extends Meta2d {
|
||
constructor(container: HTMLDivElement) {
|
||
super(container, EDITOR_CONFIG);
|
||
|
||
// 注册绘制函数
|
||
this.registerCanvasDraw({ point: drawPoint });
|
||
|
||
// 监听事件
|
||
this.on('click', (e, pen) => {
|
||
// 直接处理业务逻辑
|
||
this.handlePenClick(pen);
|
||
});
|
||
}
|
||
|
||
async addPoint(p: Point, type: MapPointType) {
|
||
const pen: MapPen = {
|
||
// ... 定义数据结构
|
||
};
|
||
|
||
// Meta2D自动处理渲染
|
||
await this.addPen(pen);
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 总结
|
||
|
||
Meta2D引擎的作用就像是一个**智能管家**：
|
||
|
||
1. **您专注于业务**：定义数据结构和绘制逻辑
|
||
2. **引擎处理细节**：坐标转换、事件处理、渲染优化
|
||
3. **原生API执行**：最终通过Canvas API完成绘制
|
||
|
||
这种分工让您可以：
|
||
|
||
- 🎯 **专注业务逻辑**：不需要处理复杂的底层细节
|
||
- 🚀 **提高开发效率**：大量重复的工作由引擎完成
|
||
- 🎨 **获得更好的性能**：引擎内置了各种优化策略
|
||
- 🔧 **更容易维护**：清晰的架构分层
|
||
|
||
**Meta2D = 图形管理框架 + 事件处理系统 + 渲染优化引擎**
|
||
|
||
它不是替代Canvas API，而是在Canvas API之上构建了一个完整的企业级图形编辑解决方案！
|
||
|
||
---
|
||
|
||
## 📱 项目中的实际应用
|
||
|
||
### 1. 响应式数据流集成
|
||
|
||
```typescript
|
||
export class EditorService extends Meta2d {
|
||
// Meta2D处理底层变化，我们用RxJS处理业务逻辑
|
||
readonly #change$$ = new Subject<boolean>();
|
||
|
||
public readonly current = useObservable<MapPen>(
|
||
this.#change$$.pipe(
|
||
debounceTime(100),
|
||
map(() => <MapPen>clone(this.store.active?.[0])),
|
||
),
|
||
);
|
||
|
||
// Meta2D的事件 → RxJS流 → Vue响应式数据
|
||
#listen(e: unknown, v: any) {
|
||
switch (e) {
|
||
case 'add':
|
||
case 'delete':
|
||
case 'update':
|
||
this.#change$$.next(true); // 通知数据变化
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 复杂业务逻辑简化
|
||
|
||
```typescript
|
||
// 创建区域时的智能关联
|
||
public async addArea(p1: Point, p2: Point, type = MapAreaType.库区, id?: string) {
|
||
// Meta2D自动处理选中状态
|
||
const selected = <MapPen[]>this.store.active;
|
||
|
||
// 根据区域类型自动关联相关元素
|
||
switch (type) {
|
||
case MapAreaType.库区:
|
||
selected?.filter(({ point }) => point?.type === MapPointType.动作点)
|
||
.forEach(({ id }) => points.push(id!));
|
||
break;
|
||
case MapAreaType.互斥区:
|
||
selected?.filter(({ point }) => point?.type).forEach(({ id }) => points.push(id!));
|
||
selected?.filter(({ route }) => route?.type).forEach(({ id }) => routes.push(id!));
|
||
break;
|
||
}
|
||
|
||
// Meta2D自动处理图形创建和渲染
|
||
const area = await this.addPen(pen, true, true, true);
|
||
this.bottom(area); // 自动层级管理
|
||
}
|
||
```
|
||
|
||
### 3. 主题系统集成
|
||
|
||
```typescript
|
||
// 监听主题变化，Meta2D自动重绘
|
||
watch(
|
||
() => sTheme.theme,
|
||
(theme) => {
|
||
this.setTheme(theme); // Meta2D内置主题系统
|
||
|
||
// 重新应用主题到自定义绘制
|
||
this.find('point').forEach((pen) => {
|
||
if (pen.point?.type >= 10) {
|
||
this.canvas.updateValue(pen, this.#mapPointImage(pen.point.type));
|
||
}
|
||
});
|
||
|
||
this.render(); // 触发重绘
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
```
|
||
|
||
### 4. 实时数据更新
|
||
|
||
```typescript
|
||
// 机器人实时位置更新
|
||
public refreshRobot(id: RobotInfo['id'], info: Partial<RobotRealtimeInfo>): void {
|
||
const { x: cx = 37, y: cy = 37, active, angle, path: points } = info;
|
||
|
||
// Meta2D自动处理坐标转换和重绘
|
||
this.setValue({
|
||
id,
|
||
x: cx - 37,
|
||
y: cy - 37,
|
||
rotate: angle,
|
||
robot: { ...robot, active, path },
|
||
visible: true
|
||
}, { render: true, history: false, doEvent: false });
|
||
}
|
||
```
|
||
|
||
### 5. 事件系统的实际使用
|
||
|
||
```typescript
|
||
constructor(container: HTMLDivElement) {
|
||
super(container, EDITOR_CONFIG);
|
||
|
||
// Meta2D统一事件处理
|
||
this.on('*', (e, v) => this.#listen(e, v));
|
||
|
||
// 具体事件映射到业务逻辑
|
||
#listen(e: unknown, v: any) {
|
||
switch (e) {
|
||
case 'click':
|
||
case 'mousedown':
|
||
case 'mouseup':
|
||
// 转换为响应式数据流
|
||
this.#mouse$$.next({ type: e, value: pick(v, 'x', 'y') });
|
||
break;
|
||
case 'active':
|
||
case 'inactive':
|
||
// 选中状态变化
|
||
this.#change$$.next(false);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 如果没有Meta2D会怎样？
|
||
|
||
假设我们要自己实现同样的功能，需要处理的复杂度：
|
||
|
||
### 1. 坐标系统管理
|
||
|
||
```typescript
|
||
// 需要手动处理缩放、平移、坐标转换
|
||
class CoordinateSystem {
|
||
private scale = 1;
|
||
private offsetX = 0;
|
||
private offsetY = 0;
|
||
|
||
screenToWorld(screenPoint: Point): Point {
|
||
return {
|
||
x: (screenPoint.x - this.offsetX) / this.scale,
|
||
y: (screenPoint.y - this.offsetY) / this.scale,
|
||
};
|
||
}
|
||
|
||
worldToScreen(worldPoint: Point): Point {
|
||
return {
|
||
x: worldPoint.x * this.scale + this.offsetX,
|
||
y: worldPoint.y * this.scale + this.offsetY,
|
||
};
|
||
}
|
||
|
||
// 还需要处理矩阵变换、旋转等复杂情况...
|
||
}
|
||
```
|
||
|
||
### 2. 碰撞检测系统
|
||
|
||
```typescript
|
||
// 需要为每种图形实现碰撞检测
|
||
class HitTest {
|
||
hitTestPoint(point: Point, pen: MapPen): boolean {
|
||
const rect = this.getPenRect(pen);
|
||
return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
|
||
}
|
||
|
||
hitTestLine(point: Point, pen: MapPen): boolean {
|
||
// 需要实现点到线段的距离计算
|
||
// 还要考虑贝塞尔曲线的复杂情况
|
||
}
|
||
|
||
hitTestArea(point: Point, pen: MapPen): boolean {
|
||
// 矩形碰撞检测
|
||
}
|
||
|
||
// 还需要处理旋转、缩放后的碰撞检测...
|
||
}
|
||
```
|
||
|
||
### 3. 渲染管理系统
|
||
|
||
```typescript
|
||
// 需要手动管理渲染队列和优化
|
||
class RenderManager {
|
||
private dirtyRects: Rect[] = [];
|
||
private renderQueue: MapPen[] = [];
|
||
|
||
markDirty(pen: MapPen) {
|
||
this.dirtyRects.push(this.getPenRect(pen));
|
||
this.renderQueue.push(pen);
|
||
}
|
||
|
||
render() {
|
||
// 计算需要重绘的区域
|
||
const mergedRect = this.mergeDirtyRects();
|
||
|
||
// 清空脏区域
|
||
this.ctx.clearRect(mergedRect.x, mergedRect.y, mergedRect.width, mergedRect.height);
|
||
|
||
// 重绘相关图形
|
||
for (const pen of this.getIntersectingPens(mergedRect)) {
|
||
this.drawPen(pen);
|
||
}
|
||
}
|
||
|
||
// 大量的优化逻辑...
|
||
}
|
||
```
|
||
|
||
**这些复杂的底层逻辑，Meta2D都已经帮我们处理好了！**
|
||
|
||
---
|
||
|
||
## 🚀 Meta2D带来的开发体验提升
|
||
|
||
### 开发效率对比
|
||
|
||
| 功能 | 纯Canvas开发 | 使用Meta2D |
|
||
| -------------------- | ------------ | ----------------------------- |
|
||
| 创建一个可点击的图形 | ~100行代码 | ~10行代码 |
|
||
| 实现拖拽功能 | ~200行代码 | 内置支持 |
|
||
| 多选和批量操作 | ~300行代码 | `this.active([...])` |
|
||
| 撤销重做 | ~500行代码 | 内置支持 |
|
||
| 图形层级管理 | ~100行代码 | `this.top()`, `this.bottom()` |
|
||
| 响应式数据绑定 | 需要自己实现 | 内置事件系统 |
|
||
|
||
### 维护成本对比
|
||
|
||
| 场景 | 纯Canvas | Meta2D |
|
||
| -------------- | ---------------- | ------------------ |
|
||
| 添加新图形类型 | 修改多个系统 | 添加绘制函数即可 |
|
||
| 性能优化 | 需要深度优化 | 引擎已优化 |
|
||
| Bug修复 | 涉及多个底层模块 | 通常只涉及业务逻辑 |
|
||
| 功能扩展 | 可能需要重构架构 | 基于现有API扩展 |
|
||
|
||
---
|
||
|
||
## 🏆 总结
|
||
|
||
Meta2D引擎就像是为Canvas开发者提供的一个**超级工具箱**：
|
||
|
||
- 🎨 **您负责创意**：定义什么样的图形、什么样的交互
|
||
- 🔧 **Meta2D负责实现**：处理所有复杂的底层逻辑
|
||
- 🚀 **Canvas负责绘制**：最终的像素级渲染
|
||
|
||
这种架构让我们的场景编辑器项目能够：
|
||
|
||
- ✅ 快速开发复杂的图形编辑功能
|
||
- ✅ 获得企业级的性能和稳定性
|
||
- ✅ 专注于业务逻辑而不是底层实现
|
||
- ✅ 轻松维护和扩展功能
|
||
|
||
**Meta2D不是画笔，而是整个画室的管理系统！**
|