Universal Canvas Schema

一套通用的Canvas绘图Schema规范，支持跨项目兼容和多种绘图库适配。

特性

1. 🌍 通用化设计 - 跨项目兼容的Canvas数据结构规范
2. 🔌 多库适配 - 支持Fabric.js、Skyline等多种绘图库
3. 📦 NPM发布 - 可直接通过NPM安装使用
4. 🛠️ 易于扩展 - 模块化设计，便于功能扩展和维护
5. ✅ 数据验证 - 内置数据校验功能，确保数据完整性
6. 💡 代码提示 - 完整的TypeScript类型定义，提供优秀的开发体验
7. 📚 完善文档 - 详细的使用文档和示例
8. 🧪 开发调试 - 便于开发和调试的工具链

安装

npm install @universal-canvas/schema

核心概念

Schema结构

Universal Canvas Schema定义了一个标准化的Canvas数据结构，包含以下核心部分：

• Canvas Properties: 画布的基本属性（宽高、背景等）
• Metadata: 元数据信息（版本、创建时间等）
• Elements: 画布中的元素列表

支持的元素类型

• 矩形 (Rectangle)
• 圆形 (Circle)
• 三角形 (Triangle)
• 直线 (Line)
• 文本 (Text)
• 图片 (Image)
• 分组 (Group)
• 路径 (Path)

适配器模式

项目采用适配器模式，可以轻松适配不同的绘图库：

• Fabric.js 适配器
• Skyline 适配器
• 可扩展的自定义适配器

使用示例

基本用法

import { CanvasDocumentSchema, validateCanvas } from '@universal-canvas/schema';

// 创建一个Canvas文档
const canvasData = {
  $schema: "https://universal-canvas-schema.org/schema.json",
  canvas: {
    width: 800,
    height: 600,
    backgroundColor: "#ffffff"
  },
  metadata: {
    version: "1.0.0",
    createdAt: new Date().toISOString(),
    lastModified: new Date().toISOString()
  },
  elements: [
    {
      id: "rect1",
      type: "rectangle",
      x: 100,
      y: 100,
      width: 200,
      height: 150,
      name: "红色矩形"
    }
  ]
};

// 验证数据
const result = validateCanvas(canvasData);
if (result.success) {
  console.log("数据验证通过");
} else {
  console.log("数据验证失败", result.error);
}

使用适配器

import { FabricAdapter } from '@universal-canvas/schema/adapters';

// 创建Fabric适配器
const fabricAdapter = new FabricAdapter();

// 将通用Schema转换为Fabric.js格式
const fabricData = fabricAdapter.fromSchema(canvasData);

// 将Fabric.js格式转换为通用Schema
const schemaData = fabricAdapter.toSchema(fabricData);

开发指南

项目结构

src/
├── types/           # TypeScript类型定义
├── schema.ts        # Schema定义
├── validator.ts     # 数据验证器
├── adapters/        # 各种绘图库适配器
│   ├── base-adapter.ts
│   ├── fabric-adapter.ts
│   └── skyline-adapter.ts
└── index.ts         # 入口文件

构建项目

npm run build

运行测试

npm test

生成文档

npm run docs

扩展自定义适配器

要创建自定义适配器，只需继承BaseAdapter类并实现相应的方法：

import { BaseAdapter, CanvasAdapter } from '@universal-canvas/schema/adapters';
import { CanvasSchema } from '@universal-canvas/schema';

class CustomAdapter extends BaseAdapter {
  fromSchema(schema: CanvasSchema): any {
    // 实现转换逻辑
  }
  
  toSchema(data: any): CanvasSchema {
    // 实现转换逻辑
  }
  
  // ... 实现其他抽象方法
}

贡献

欢迎提交Issue和Pull Request来改进这个项目！

许可证

MIT