# ProCanvasRefactored

**Repository Path**: xuebusi/ProCanvasRefactored

## Basic Information

- **Project Name**: ProCanvasRefactored
- **Description**: ProCanvasRefactored
- **Primary Language**: Swift
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-11
- **Last Updated**: 2026-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ProCanvas Refactored

一个专业的 macOS 画布应用，提供类似 Figma 的设计体验，支持画布缩放、图层操作、多种手柄样式等功能。

## 📋 目录

- [功能特性](#功能特性)
- [技术架构](#技术架构)
- [项目结构](#项目结构)
- [使用方法](#使用方法)
- [快捷键和操作](#快捷键和操作)
- [技术栈](#技术栈)
- [开发说明](#开发说明)

## ✨ 功能特性

### 🎨 画布功能
- **无限网格背景**：支持缩放和平移的无限网格，提供精确的定位参考
- **画布预设**：内置多种设备尺寸预设（iPhone、iPad、社交媒体等）
- **画布缩放**：支持 0.1x - 5.0x 的缩放范围，通过滑块或滚轮控制
- **画布平移**：支持空格键拖拽和右键拖拽两种方式平移画布
- **画布旋转**：一键旋转画布尺寸（横竖切换）
- **中心十字线**：显示画布中心位置，便于对齐

### 🖼️ 图层操作
- **图层移动**：点击并拖拽图层进行移动
- **图层缩放**：通过 8 个控制手柄调整图层尺寸
- **保持纵横比**：拖拽四个角时自动保持图层原始纵横比
- **选中状态**：点击图层显示选中边框和控制手柄
- **实时反馈**：状态栏实时显示图层尺寸和位置信息

### 🎯 手柄样式
支持 5 种不同的手柄样式，可根据需要切换：

1. **ClassicHandleStyle** - 经典圆环样式
2. **ModernHandleStyle** - 现代方块样式（macOS 风格）
3. **CapsuleHandleStyle** - 胶囊样式（针对边框优化）
4. **FigmaHandleStyle** - Figma 极简风格（Ghost Style）
5. **OutsetCornerStyle** - 外置投影风格

### 📊 状态栏信息
- 画布尺寸显示
- 图层尺寸显示
- 图层位置显示
- 选中状态提示
- 工具激活状态提示

## 🏗️ 技术架构

项目采用 **MVVM（Model-View-ViewModel）** 架构模式，代码结构清晰，易于维护和扩展。

### 架构层次

```
View Layer (视图层)
├── ProfessionalCanvasView      # 主视图
├── CanvasViewport               # 画布视口容器
├── LayerContainer               # 图层容器
├── HandlesOverlay               # 手柄覆盖层
├── CanvasControlBar             # 顶部控制栏
└── CanvasStatusBar              # 底部状态栏

ViewModel Layer (视图模型层)
└── CanvasViewModel              # 画布状态管理和业务逻辑

Model Layer (模型层)
├── HandleLocation               # 手柄位置枚举
├── CanvasPreset                 # 画布预设
└── LayerModel                   # 图层数据模型

Utils Layer (工具层)
└── EventMonitors                # 全局事件监听（键盘、鼠标）
```

## 📁 项目结构

```
ProCanvasRefactored/
├── ProCanvasRefactored/
│   ├── Models/                  # 数据模型
│   │   └── HandleLocation.swift
│   │
│   ├── ViewModels/              # 视图模型
│   │   └── CanvasViewModel.swift
│   │
│   ├── Views/                   # 视图组件
│   │   ├── Main/
│   │   │   └── ProfessionalCanvasView.swift
│   │   ├── Canvas/
│   │   │   └── CanvasViewport.swift
│   │   ├── Components/
│   │   │   ├── Common/
│   │   │   │   ├── CanvasCenterCross.swift
│   │   │   │   ├── DimensionInput.swift
│   │   │   │   └── InfiniteGrid.swift
│   │   │   └── Handles/
│   │   │       ├── HandlesOverlay.swift
│   │   │       └── Styles/
│   │   │           └── ResizeHandleStyle.swift
│   │   └── Controls/
│   │       └── CanvasControlBar.swift
│   │
│   ├── Utils/                   # 工具类
│   │   └── Input/
│   │       └── EventMonitors.swift
│   │
│   ├── Assets.xcassets/         # 资源文件
│   └── ProCanvasRefactoredApp.swift
│
└── ProCanvasRefactored.xcodeproj/
```

## 🚀 使用方法

### 基本操作

1. **选择画布尺寸**
   - 点击顶部工具栏的预设选择器
   - 选择所需的设备或社交媒体尺寸预设

2. **调整画布尺寸**
   - 在顶部工具栏的 W（宽度）和 H（高度）输入框中输入数值
   - 或点击旋转按钮切换横竖方向

3. **缩放画布**
   - 使用顶部工具栏的缩放滑块
   - 或使用鼠标滚轮进行缩放

4. **平移画布**
   - 按住空格键并拖拽鼠标
   - 或按住右键并拖拽鼠标

5. **操作图层**
   - 点击图层选中（显示蓝色边框和 8 个控制手柄）
   - 拖拽图层进行移动
   - 拖拽控制手柄调整尺寸
   - 点击画布空白处取消选中

6. **重置画布**
   - 点击顶部工具栏的 "Reset" 按钮
   - 将画布缩放、偏移和图层位置重置为初始状态

## ⌨️ 快捷键和操作

| 操作 | 快捷键/手势 | 说明 |
|------|------------|------|
| 平移画布 | `空格键 + 拖拽` | 抓手工具 |
| 平移画布 | `右键 + 拖拽` | 替代方式 |
| 缩放画布 | `鼠标滚轮` | 向上放大，向下缩小 |
| 选中图层 | `点击图层` | 显示控制手柄 |
| 取消选中 | `点击空白处` | 隐藏控制手柄 |
| 移动图层 | `拖拽图层` | 在画布上移动 |
| 调整尺寸 | `拖拽控制手柄` | 调整图层大小 |

## 🛠️ 技术栈

- **开发语言**: Swift
- **UI 框架**: SwiftUI
- **平台**: macOS
- **最低系统要求**: macOS 11.0+
- **开发工具**: Xcode

### 核心技术特性

- **SwiftUI**: 声明式 UI 框架，提供流畅的用户体验
- **MVVM 架构**: 清晰的代码结构，易于维护和测试
- **Combine**: 响应式编程，处理状态变化
- **AppKit 集成**: 全局事件监听（键盘、鼠标）
- **Canvas API**: 高性能的网格绘制

## 💻 开发说明

### 环境要求

- Xcode 13.0 或更高版本
- macOS 11.0 或更高版本
- Swift 5.5 或更高版本

### 运行项目

1. 克隆或下载项目
2. 使用 Xcode 打开 `ProCanvasRefactored.xcodeproj`
3. 选择目标设备为 "My Mac"
4. 点击运行按钮（⌘R）或按 `Cmd + R`

### 自定义手柄样式

在 `HandlesOverlay.swift` 中修改 `style` 属性：

```swift
// 在 HandlesOverlay 中
let style = ClassicHandleStyle()  // 或 ModernHandleStyle(), CapsuleHandleStyle() 等
```

### 添加新的画布预设

在 `CanvasViewModel.swift` 的 `presetGroups` 中添加：

```swift
CanvasPreset(name: "自定义名称", size: CGSize(width: 宽度, height: 高度))
```

### 代码特点

- **模块化设计**: 每个功能模块独立，便于维护
- **协议驱动**: 手柄样式使用协议模式，易于扩展
- **状态管理**: 使用 `@Published` 和 `@StateObject` 进行响应式状态管理
- **事件处理**: 全局事件监听器统一处理键盘和鼠标事件

## 📝 更新日志

### v1.0.0 (2026-01-11)
- ✅ 初始版本发布
- ✅ 实现画布缩放和平移功能
- ✅ 实现图层移动和缩放功能
- ✅ 支持 5 种手柄样式
- ✅ 支持多种画布预设
- ✅ 实现无限网格背景
- ✅ 添加画布中心十字线
- ✅ 完善状态栏信息显示

## 📄 许可证

本项目仅供学习和研究使用。

## 👤 作者

Created by devlink

---

**注意**: 本项目是基于原始 ProCanvas 项目的重构版本，采用了更清晰的架构设计和代码组织方式。