Rendx

轻量、高效的 2D 可视化渲染引擎

基于 TypeScript 构建，支持 Canvas2D 和 SVG 双渲染后端

---

特性

• 🎨 双渲染后端 — Canvas2D + SVG，统一接口无缝切换
• 🌳 场景图引擎 — Scene → Layer → Group → Node 层级结构，脏标记按需重绘
• ⚡ 高性能 — 多 Canvas 分层渲染、视口裁剪、Z 排序缓存
• 🎬 动画系统 — 几何变换 / 属性 / 裁剪 / 弧线 / 扇形 5 种动画，33 种缓动函数
• 🖱️ 事件系统 — 完整 W3C 三阶段事件流（capture → target → bubble）
• 📦 Monorepo — 17 个包分层架构，按需引用，Tree-shakable
• 🔌 插件化 — Graph / Selection / Grid / History / Minimap 五大内置插件
• 🖱️ 选框交互 — 点击选中、Shift 多选、框选、悬停高亮、命中委托、自定义 overlay
• 📊 图数据管理 — Node/Edge 生命周期、类型注册、依赖追踪、序列化/反序列化
• 💾 序列化 — toJSON / fromJSON 场景持久化

快速开始

npm install rendx-engine

import {App, Node} from 'rendx-engine';

const app = new App({width: 800, height: 600});
app.mount(document.getElementById('container')!);

const circle = Node.create('circle', {fill: '#ff0000', stroke: '#333'});
circle.shape.from(400, 300, 50);
app.scene.add(circle);

const rect = Node.create('rect', {fill: '#0066ff', opacity: 0.8});
rect.shape.from(100, 100, 200, 150);
app.scene.add(rect);

app.render();

包架构

Layer 0 (零依赖)
├── rendx-core         基础类型 + 工具函数
├── rendx-bounding     包围盒计算
├── rendx-path         SVG 路径构建器
└── rendx-ease         缓动函数

Layer 1
├── rendx-dom          DOM/SVG 元素操作
└── rendx-curve        曲线插值算法

Layer 2
├── rendx-interpolate  插值器（数值、颜色、向量、矩阵）
├── rendx-shape        形状生成器
└── rendx-gradient     渐变解析与生成

Layer 3
├── rendx-canvas       Canvas2D 渲染器
└── rendx-svg          SVG 渲染器

Layer 4
└── rendx-engine       场景图引擎

插件
├── rendx-graph-plugin      图元素生命周期管理
├── rendx-grid-plugin       网格背景
├── rendx-history-plugin    撤销/重做
├── rendx-minimap-plugin    小地图导航
└── rendx-selection-plugin  选框交互

文档

• 📖 在线文档
• 🎮 Playground

开发

pnpm install          # 安装依赖
pnpm build            # 构建所有包
pnpm test             # 运行测试
pnpm lint             # 代码检查
pnpm format           # 格式化

技术栈

• 语言: TypeScript 5.9+ (strict 模式)
• 构建: tsup (ESM + CJS + DTS)
• 编排: Turborepo
• 包管理: pnpm 9.x workspace
• 代码质量: ESLint 9 + Prettier 3
• 版本管理: Changesets
• 提交规范: commitlint + husky + Conventional Commits

License

MIT © wei.liang