init: 2.B

docs/api/motajs-render-core/Sprite.md

@@ -0,0 +1,121 @@
+# Sprite 类 API 文档
+
+本文档由 `DeepSeek R1` 模型生成并微调。
+
+---
+
+## 继承关系
+
+```mermaid
+graph LR
+    Sprite --> RenderItem --> EventEmitter
+
+    click RenderItem "./RenderItem"
+    click EventEmitter "https://nodejs.org/api/events.html#class-eventemitter"
+```
+
+---
+
+## 属性说明
+
+| 属性名     | 类型             | 默认值     | 说明                                   |
+| ---------- | ---------------- | ---------- | -------------------------------------- |
+| `renderFn` | `RenderFunction` | `() => {}` | 自定义渲染函数，用于定义精灵的绘制逻辑 |
+
+---
+
+## 构造方法
+
+### `constructor`
+
+**参数**
+
+-   `type`: 渲染模式（`absolute` 绝对定位 / `static` 跟随摄像机）
+-   `cache`: 是否启用渲染缓存（默认启用）
+-   `fall`: 是否启用变换矩阵下穿机制（默认关闭）
+
+**示例**
+
+```typescript
+const sprite = new Sprite('static');
+```
+
+---
+
+## 方法说明
+
+### `setRenderFn`
+
+```typescript
+function setRenderFn(fn: RenderFunction): void;
+```
+
+**描述**  
+设置自定义渲染函数，用于定义精灵的具体绘制逻辑。  
+**参数**
+
+-   `fn`: 接收画布和变换矩阵的回调函数，格式为 `(canvas, transform) => void`
+
+**示例**
+
+```typescript
+sprite.setRenderFn((canvas, transform) => {
+    // 绘制一个红色矩形
+    canvas.ctx.fillStyle = 'red';
+    canvas.ctx.fillRect(0, 0, sprite.width, sprite.height);
+});
+```
+
+---
+
+## 总使用示例
+
+```typescript
+// 创建精灵实例
+const sprite = new Sprite('absolute');
+sprite.size(100, 100); // 设置尺寸
+sprite.pos(200, 150); // 设置坐标
+
+// 定义渲染逻辑
+sprite.setRenderFn(canvas => {
+    const ctx = canvas.ctx;
+    // 绘制渐变圆形
+    const gradient = ctx.createRadialGradient(50, 50, 0, 50, 50, 50);
+    gradient.addColorStop(0, 'yellow');
+    gradient.addColorStop(1, 'orange');
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(50, 50, 50, 0, Math.PI * 2);
+    ctx.fill();
+});
+
+// 添加到父容器
+container.appendChild(sprite);
+
+// 监听变换事件
+sprite.on('transform', (item, transform) => {
+    console.log('精灵变换矩阵更新:', transform);
+});
+```
+
+---
+
+## 高级用法示例
+
+```typescript
+// 创建动态旋转精灵
+const rotatingSprite = new Sprite('static');
+rotatingSprite.size(80, 80);
+rotatingSprite.setRenderFn((canvas, transform) => {
+    canvas.ctx.fillStyle = 'blue';
+    canvas.ctx.fillRect(0, 0, 80, 80);
+});
+
+// 每帧旋转
+rotatingSprite.delegateTicker(time => {
+    rotatingSprite.transform.setRotate(time / 1000);
+});
+
+// 添加到场景
+rootContainer.appendChild(rotatingSprite);
+```