npm package: @qxintech/artimoi-canvas
Description: 一个基于 Vue 3 + Fabric.js 的现代画布编辑器组件库，提供丰富的图形编辑功能。
Latest version: 0.0.2

# Customization Canvas

一个基于 Vue 3 + Fabric.js 的现代画布编辑器组件库，提供丰富的图形编辑功能。

## ✨ 特性

- 🎨 **完整的编辑器界面** - 开箱即用的画布编辑器
- 🖼️ **多媒体支持** - 文本、图片等多种元素
- 🔧 **属性编辑** - 实时编辑对象属性
- 📐 **精确控制** - 位置、大小、旋转、透明度等
- 💾 **导出功能** - 支持 PNG、JPEG、SVG 格式
- 🎯 **文本编辑** - 就地编辑，丰富的文本样式
- 🏗️ **组件化设计** - 可按需使用各个组件
- 📱 **响应式设计** - 适配不同屏幕尺寸

## 📦 安装

### 本地开发
```bash
# 克隆项目
git clone <repository-url>
cd customization-canvas

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

### NPM 包使用 (未来)
```bash
npm install @qxintech/artimoi-canvas
```

## 🚀 快速开始

### 方式一：使用完整工作空间

```vue
<template>
  <CanvasWorkspace
    title="我的设计工具"
    :canvas-width="800"
    :canvas-height="600"
    :show-tool-panel="true"
    :show-property-panel="true"
    :on-save="handleSave"
    :on-export="handleExport"
    @canvas-ready="handleCanvasReady"
  />
</template>

<script setup>
import { CanvasWorkspace } from '@qxintech/artimoi-canvas'

const handleCanvasReady = (core) => {
  console.log('画布已准备就绪')
}

const handleSave = async (data) => {
  // 保存设计数据
  await api.saveDesign(data)
}

const handleExport = async (blob, type) => {
  // 处理导出的文件
  downloadFile(blob, `design.${type}`)
}
</script>
```

### 方式二：分别使用各个组件

```vue
<template>
  <div class="editor-layout">
    <!-- 工具面板 -->
    <ToolPanel 
      @add-text="addText"
      @add-image="addImage"
      @export-image="exportImage"
    />
    
    <!-- 画布编辑器 -->
    <CanvasEditor
      ref="editor"
      :width="800"
      :height="600"
      @selection-change="updateSelection"
    />
    
    <!-- 属性面板 -->
    <PropertyPanel 
      :selected-nodes="selectedNodes"
      @update-node="updateNode"
    />
  </div>
</template>

<script setup>
import { 
  CanvasEditor, 
  ToolPanel, 
  PropertyPanel 
} from '@qxintech/artimoi-canvas'

// ... 组件逻辑
</script>
```

## 🧩 核心组件

### CanvasWorkspace
完整的画布工作空间，包含所有功能面板。

**Props:**
- `title?: string` - 工作空间标题
- `canvasWidth?: number` - 画布宽度 (默认 800)
- `canvasHeight?: number` - 画布高度 (默认 600)
- `backgroundColor?: string` - 背景色 (默认 '#ffffff')
- `showToolPanel?: boolean` - 显示工具面板 (默认 true)
- `showPropertyPanel?: boolean` - 显示属性面板 (默认 true)
- `showLayerPanel?: boolean` - 显示图层面板 (默认 false)
- `onSave?: (data: any) => void` - 保存回调
- `onExport?: (blob: Blob, type: string) => void` - 导出回调

**Events:**
- `canvasReady` - 画布初始化完成
- `selectionChange` - 选择对象变化
- `dataChange` - 画布数据变化

### CanvasEditor
核心画布编辑器组件。

**Methods:**
- `addText(text, options)` - 添加文本
- `addImage(src, options)` - 添加图片
- `exportImage(format, quality)` - 导出图片
- `exportSVG()` - 导出 SVG
- `clearCanvas()` - 清空画布

### ToolPanel
左侧工具面板，包含添加元素、缩放等功能。

**Events:**
- `addText` - 添加文本
- `addImage` - 添加图片 
- `zoomIn/zoomOut` - 缩放操作
- `exportImage/exportSVG` - 导出操作

### PropertyPanel
右侧属性编辑面板，用于编辑选中对象的属性。

**Props:**
- `selectedNodes: SelectedNode[]` - 选中的节点

**Events:**
- `updateNode` - 更新节点属性
- `deleteNode` - 删除节点
- 层级操作事件

### LayerPanel
图层管理面板 (可选)。

**Props:**
- `nodes: Node[]` - 所有节点
- `selectedNodes: SelectedNode[]` - 选中的节点

### ExportModal
导出设置对话框。

### InplaceEditor
文本就地编辑器。

## 🎯 使用场景

- **设计工具** - 创建在线设计平台
- **内容编辑** - 图文混排编辑器
- **模板定制** - 海报、名片等模板编辑
- **产品定制** - 商品个性化定制
- **教育工具** - 绘图和设计教学

## 🔧 高级用法

### 自定义主题
```vue
<CanvasWorkspace 
  :canvas-width="1200"
  :canvas-height="800"
  background-color="#f0f0f0"
  class="dark-theme"
/>
```

### 扩展功能
```javascript
// 获取画布核心实例
const core = workspace.getCanvasCore()

// 添加自定义功能
core.addCustomNode(customNodeData)

// 监听事件
core.on('nodeAdded', handleNodeAdded)
```

### 数据持久化
```javascript
// 导出设计数据
const designData = await core.exportData()

// 保存到服务器
await api.saveDesign(designData)

// 加载设计数据
await core.loadData(designData)
```

## 🛠️ 开发

### 项目结构
```
src/
├── components/          # Vue 组件
│   ├── CanvasWorkspace.vue    # 完整工作空间
│   ├── CanvasEditor.vue       # 画布编辑器
│   ├── ToolPanel.vue          # 工具面板
│   ├── PropertyPanel.vue      # 属性面板
│   ├── LayerPanel.vue         # 图层面板
│   ├── ExportModal.vue        # 导出模态框
│   └── InplaceEditor.vue      # 文本编辑器
├── core/               # 核心引擎
│   ├── CanvasCore.ts          # 画布核心
│   ├── CanvasRenderer.ts      # 渲染器
│   ├── managers/              # 管理器
│   └── node/                  # 节点系统
├── stores/             # 状态管理
├── composables/        # 组合式API
├── utils/              # 工具函数
└── types/              # 类型定义
```

### 构建命令
```bash
# 开发模式
npm run dev

# 构建库
npm run build

# 类型检查
npm run type-check

# 代码检查
npm run lint
```

## 📄 License

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## �� 联系

如有问题，请联系开发团队。