PaintCodeSample

基于 Swift 使用 PaintCode 和 QuartzCode 制作的 iOS 图形绘制示例集合

项目简介

PaintCodeSample 是一个使用 Swift 语言编写的 iOS 图形绘制示例项目集合。项目展示了如何使用 PaintCode 和 QuartzCode 这两个强大的可视化工具来创建各种自定义 UI 组件和动画效果，包括饼图、进度条、仪表盘、时钟、动画等多个实用示例。

技术栈

• 开发语言: Swift
• 开发平台: iOS (Xcode)
• 图形工具:
  • PaintCode - 可视化矢量图形设计工具
  • QuartzCode - Core Animation 动画设计工具
• 核心技术:
  • Core Graphics (Quartz 2D)
  • Core Animation
  • UIKit
  • @IBDesignable / @IBInspectable

功能特性

• 自定义绘制组件: 使用 Core Graphics 绘制自定义 UI
• 可配置参数: 通过 @IBInspectable 在 Interface Builder 中实时预览
• 动画效果: Core Animation 和 CAReplicatorLayer 动画
• 矢量绘图: 基于 PaintCode 生成的 StyleKit 代码
• 实时渲染: @IBDesignable 支持 Storyboard 实时预览

项目结构

PaintCodeSample/
├── README.md                    # 项目说明文档
├── LICENSE                      # 许可证文件
├── PaintCodeSamples.xcworkspace # Xcode 工作空间
├── doc/                         # 文档和效果图
│   ├── PieChart.gif
│   ├── ProgressBar.gif
│   ├── SimpleDraw.gif
│   ├── ButtonView.gif
│   ├── SinMotion.gif
│   ├── DashBoard.gif
│   ├── ClockBoard.gif
│   ├── ActivityBoard.gif
│   ├── GraphicDraw.gif
│   ├── HamburgerAnimate.gif
│   ├── ReplicatorAnimate.gif
│   └── Telekinesis.gif
├── LWPieChart/                  # 饼图组件
├── LWProgressBar/               # 进度条组件
├── StyleKitDemo/                # StyleKit 示例
├── ButtonView/                  # 自定义按钮
├── SinMotion/                   # 正弦运动动画
├── DashBoard/                   # 仪表盘组件
├── ClockBoard/                  # 时钟组件
├── ActivityBoard/               # 环形进度条
├── GraphicDraw/                 # 图形绘制详解
├── HamburgerAnimation/          # Hamburger 菜单动画
├── ReplicatorAnimate/           # Loading 动画
├── TelekinesisSample/           # Telekinesis 绘制示例
└── RotateView/                  # 旋转视图示例

示例项目详解

1. LWPieChart - 饼图组件

功能: 自定义饼图绘制，支持多个扇区和动态数据

技术要点:

• 使用 Core Graphics 绘制扇形
• @IBDesignable 实时预览
• @IBInspectable 可配置内环比例
• 支持多色彩渲染

2. LWProgressBar - 进度条组件

功能: 圆形进度条，支持进度百分比显示

技术要点:

• CAShapeLayer 绘制圆弧
• 动画进度更新
• 可自定义颜色和宽度

3. StyleKitDemo - 自定义绘制

功能: 展示 PaintCode 生成的 StyleKit 使用方法

技术要点:

• PaintCode 导出的 Swift 代码
• 矢量图形绘制
• 自定义视图封装

4. ButtonView - 自定义按钮

功能: 使用 PaintCode 设计的自定义按钮

技术要点:

• StyleKit 集成
• 按钮状态切换
• 视觉反馈动画

5. SinMotion - 正弦运动

功能: 实现正弦波形运动动画

技术要点:

• Core Graphics 绘制路径
• CADisplayLink 驱动动画
• 数学函数应用（正弦函数）

6. DashBoard - 仪表盘

功能: 汽车仪表盘样式的数据展示组件

技术要点:

• 复杂图形组合绘制
• 指针动画
• 刻度尺绘制

7. ClockBoard - 时钟表

功能: 实时时钟显示

技术要点:

• 时针、分针、秒针绘制
• Timer 驱动时间更新
• 平滑动画过渡

8. ActivityBoard - 环形进度条

功能: 类似 Apple Watch 活动环的进度显示

技术要点:

• 多层圆环绘制
• 渐变色应用
• 动态进度更新

9. GraphicDraw - 图形绘制详解

功能: 详细讲解各种图形绘制技术

技术要点:

• Core Graphics 基础 API
• 路径、填充、描边
• 渐变和阴影效果

10. HamburgerAnimation - 汉堡菜单动画

功能: 使用 QuartzCode 制作的菜单切换动画

技术要点:

• CABasicAnimation
• CAAnimationGroup
• 三条线变形动画

11. ReplicatorAnimate - 加载动画

功能: 使用 CAReplicatorLayer 制作的 Loading 动画

技术要点:

• CAReplicatorLayer 复制层
• 延迟动画
• 循环动画效果

12. TelekinesisSample - Telekinesis 绘制

功能: 动态绘制效果展示

技术要点:

• 实时绘图
• 路径跟踪
• 手势识别

依赖要求

• Xcode: 8.0 或更高版本
• iOS: 9.0 或更高版本
• Swift: 3.0 或更高版本（根据具体子项目）
• PaintCode: 用于查看和编辑原始设计文件（可选）
• QuartzCode: 用于编辑动画（可选）

安装和运行

1. 克隆项目

cd /Users/luowei/projects/My_Github/apps/PaintCodeSample

2. 打开工作空间

# 使用 Xcode 打开工作空间
open PaintCodeSamples.xcworkspace

或者打开单个项目：

# 例如打开饼图项目
open LWPieChart/LWPieChart.xcodeproj

3. 选择目标和设备

• 在 Xcode 中选择要运行的 Scheme（如 LWPieChart）
• 选择目标设备（模拟器或真机）
• 点击 Run 按钮（⌘R）

4. 查看效果

• 应用会在选择的设备上运行
• 每个示例项目都有独立的演示界面

使用说明

集成到自己的项目

1. 复制组件文件

   • 将所需组件的 Swift 文件复制到项目中
   • 如：LWPieChart.swift, LWPieChartDraw.swift

2. 使用 @IBDesignable

   @IBDesignable
   class CustomView: UIView {
       // 自定义绘制代码
   }

3. 配置参数

   @IBInspectable var ratio: CGFloat = 0.5 {
       didSet {
           setNeedsDisplay()
       }
   }

4. 在 Storyboard 中使用

   • 拖拽一个 UIView
   • 设置 Custom Class 为自定义类
   • 在 Attributes Inspector 中调整参数

PaintCode 工作流程

1. 在 PaintCode 中设计图形
2. 导出为 Swift StyleKit 代码
3. 将代码集成到 Xcode 项目
4. 在自定义视图中调用绘制方法

QuartzCode 动画制作

1. 在 QuartzCode 中设计动画
2. 导出为 Swift 代码
3. 集成到项目的动画控制器中
4. 调用动画方法触发效果

学习要点

Core Graphics 核心概念

1. 图形上下文 (CGContext)

   • 绘制环境和目标
   • 状态管理（保存/恢复）

2. 路径 (CGPath)

   • 直线、曲线、弧线
   • 闭合路径和子路径

3. 变换 (Transform)

   • 平移、旋转、缩放
   • CTM (Current Transformation Matrix)

4. 颜色和渐变

   • CGColor
   • 线性渐变、径向渐变

5. 绘制操作

   • 填充 (fill)
   • 描边 (stroke)
   • 裁剪 (clip)

Core Animation 技术

1. CALayer 属性动画

   • position, bounds, transform
   • opacity, backgroundColor

2. CAShapeLayer

   • 基于路径的图层
   • strokeStart/strokeEnd 动画

3. CAReplicatorLayer

   • 层复制和变换
   • 创建重复图案

4. 动画组合

   • CAAnimationGroup
   • 时序控制

@IBDesignable/@IBInspectable

1. 实时预览

   • Storyboard 中即时渲染
   • 提高开发效率

2. 可视化配置

   • 无需编写代码即可调整参数
   • 支持的类型：Int, CGFloat, String, Bool, UIColor, UIImage

技术特点

1. 可复用组件: 每个示例都是独立的可复用组件
2. 可视化设计: 利用 PaintCode/QuartzCode 提高开发效率
3. 性能优化: 使用 Core Graphics 直接绘制，性能优异
4. 矢量图形: 不依赖图片资源，适配所有分辨率
5. 动画流畅: 基于 Core Animation 的硬件加速
6. 易于集成: 清晰的代码结构，方便集成到项目中

扩展建议

• 添加更多图表类型（柱状图、折线图）
• 实现手势交互（点击、拖动、缩放）
• 支持数据动态更新
• 添加更多动画效果
• 实现主题切换功能
• 支持暗黑模式
• 优化性能和内存使用
• 添加单元测试

常见问题

1. @IBDesignable 不显示预览

• 清理 DerivedData: Xcode > Preferences > Locations
• 重新编译项目: Product > Clean Build Folder
• 检查代码是否有错误

2. 动画不流畅

• 使用 CADisplayLink 替代 Timer
• 避免在主线程做重度计算
• 使用异步绘制

3. 自定义组件在 Storyboard 中不显示

• 确认设置了正确的 Module
• 检查 Custom Class 是否正确
• 重新编译项目

许可证

本项目采用 MIT 许可证，详见 LICENSE 文件。

相关资源

• PaintCode 官网
• QuartzCode 官网
• Core Graphics 文档
• Core Animation 文档
• Swift 官方文档

作者

luowei - 2016年创建

致谢

感谢 PaintCode 和 QuartzCode 团队提供的优秀工具，让 iOS 图形开发变得更加简单高效。