Customization Canvas

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

✨ 特性

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

📦 安装

本地开发

# 克隆项目
git clone <repository-url>
cd customization-canvas

# 安装依赖
npm install

# 启动开发服务器
npm run dev

NPM 包使用 (未来)

npm install @qxintech/artimoi-canvas

🚀 快速开始

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

<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>

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

<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

文本就地编辑器。

🎯 使用场景

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

🔧 高级用法

自定义主题

<CanvasWorkspace 
  :canvas-width="1200"
  :canvas-height="800"
  background-color="#f0f0f0"
  class="dark-theme"
/>

扩展功能

// 获取画布核心实例
const core = workspace.getCanvasCore()

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

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

数据持久化

// 导出设计数据
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/              # 类型定义

构建命令

# 开发模式
npm run dev

# 构建库
npm run build

# 类型检查
npm run type-check

# 代码检查
npm run lint

📄 License

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

�� 联系

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