PaintCode 3 是一款专为 macOS 设计的矢量图形设计工具，其核心价值在于能够将视觉设计实时转换为 Objective-C、Swift、JavaScript、Java、C# 等多种编程语言的代码。它极大地简化了设计师与开发者之间的协作流程，使图标、按钮、界面元素等能够以可缩放、可动态修改的代码形式直接集成到项目中，是 UI/UX 设计师和前端开发者的强大生产力工具。

一、核心界面与工作区详解

PaintCode 3 的界面经过精心设计，逻辑清晰，主要分为以下几个核心区域：

画布（Canvas）：中央主区域，用于绘制和编辑矢量图形。支持多画布（Pages）和多帧（Frames）管理，方便组织复杂项目。
检查器（Inspector）：位于右侧面板。根据所选对象（形状、文本、样式等）动态变化，用于调整几何属性、填充、边框、阴影及导出设置。
图层列表（Layer List）：位于左侧面板。以树状结构展示画布中所有对象、组和画布的层级关系。支持拖拽排序、成组和图层锁定/隐藏。
样式列表（Style List）：通常位于检查器下方或独立面板。集中管理项目中定义的所有颜色、渐变和阴影样式，确保视觉一致性并方便全局修改。
代码预览面板（Code Preview）：底部或侧边面板，可实时查看当前所选画布或帧所生成的代码。可切换编程语言和代码风格。
工具栏（Toolbar）：顶部区域，提供常用工具的快捷访问，如选择工具、矢量钢笔、形状工具、文本工具以及变量和表达式编辑器入口。

二、完整操作流程：从创建到导出

1. 创建或打开项目

操作步骤：

启动 PaintCode 3。
创建新项目：点击菜单栏 文件 → 新建 或使用快捷键 Command + N。
打开现有项目：点击菜单栏 文件 → 打开... 或使用快捷键 Command + O，选择 .paintcode 文件。

2. 绘制与设计

操作步骤：

选择工具：从工具栏点击“矩形”、“椭圆”、“钢笔”等工具，或使用快捷键 V（选择）、R（矩形）、O（椭圆）、P（钢笔）。
绘制形状：在画布上点击并拖拽创建形状。使用钢笔工具点击可创建路径点，拖拽可创建曲线。
应用样式：在右侧检查器中，为形状设置“填充”（纯色、线性/径向渐变）、“边框”及“阴影”。可以从样式列表中拖拽预定义样式快速应用。
添加文本：选择文本工具（快捷键 T），在画布上点击并输入。在检查器中调整字体、大小、对齐等属性。

3. 使用变量与表达式实现动态图形

这是 PaintCode 的核心进阶功能，让图形参数（如颜色、尺寸、比例）可由代码控制。

操作步骤：

在检查器中，将需要动态化的属性值（如填充色的十六进制码、矩形的宽度数值）选中并右键点击。
选择 创建变量 或 创建表达式。变量会出现在左侧的“变量”列表中。
双击变量名可进行重命名（如 `buttonColor`, `iconSize`），使其在代码中更具可读性。
对于表达式，可以输入数学公式（如 `frame.width * 0.5`）或链接到其他变量，实现关联计算。

4. 组织与导出

操作步骤：

图层管理：在左侧图层列表，将相关图层拖拽到一起以创建“组”（快捷键 Command + G）。可对组应用变换和样式。
创建多个画布/帧：用于设计同一元素的不同状态（如正常/按下）或不同尺寸。通过左下角的“+”按钮添加。
预览代码：在代码预览面板，从下拉菜单中选择目标语言（如 Swift）。代码将实时更新。
导出代码：
- 导出单个画布代码：确保目标画布被选中，在代码预览面板中全选（Command + A）并复制（Command + C）。
- 批量导出：使用菜单栏 文件 → 导出...（Command + Shift + E），可选择导出所有画布或帧为代码文件，或导出为 SVG、PDF 等静态图像格式。

三、常用功能进阶技巧

布尔运算（路径操作）：选中两个重叠的形状，在检查器顶部选择“合并”、“相交”、“相减”或“排除”来创建复杂图形。非破坏性操作，可随时修改。
对齐与分布：选中多个对象，使用菜单栏 排列 → 对齐 下的子菜单（如左对齐、水平居中、等间距分布）来精确排版。
使用画布帧（Frames）适配多尺寸：在一个画布内创建多个“帧”，分别代表 @1x, @2x, @3x 尺寸或不同设备。共享图层和变量，实现一稿多尺寸适配。
代码样式定制：在代码预览面板点击设置图标，可以自定义生成代码的函数命名规则、是否生成预览注释、代码格式等，使其更贴合项目规范。

四、常见问题与解决方案

Q1: 生成的 Swift/Objective-C 代码如何在我的 Xcode 项目中使用？

A1: 将复制的代码粘贴到您的 UIView 子类或 UIViewController 的相应方法中（如 `drawRect:`）。确保在绘制代码中正确使用 PaintCode 生成的静态方法（如 `StyleKit.drawCanvas1(frame: …)`）。需要动态修改属性时，调用包含参数的方法并传入变量值。

Q2: 为什么修改了变量值，但画布上的图形没有实时更新？

A2: 首先检查该变量是否确实被图形属性所引用。然后，确保在检查器中修改的是“变量”的值，而不是覆盖了该变量的局部值。在变量面板中修改变量值会全局生效。

Q3: 导出的 SVG 在网页中显示异常（如颜色错误、形状错位）。

A3: 这通常是由于 PaintCode 的某些高级特性（如混合模式、特定类型的阴影）不被 SVG 标准完全支持。解决方案：导出前，尽量使用基本的填充、描边和渐变；对于复杂图形，尝试将其栅格化（右键图层 → “栅格化”）后再导出为 PNG。

Q4: 如何实现一个可动态改变颜色的按钮图标？

A4: 为图标的填充色创建变量（如 `iconTintColor`）。在设计时，所有需要变色的部分都引用这个变量。在生成的代码中，会有一个对应参数。在 App 运行时，通过传递不同的 UIColor/NSColor 给该参数，即可动态改变图标颜色。

五、PaintCode 3 for Mac 快捷键汇总表

功能分类	操作描述	快捷键 (Mac)
文件操作	新建项目	Command + N
	打开项目	Command + O
	保存项目	Command + S
	导出…	Command + Shift + E
编辑操作	撤销	Command + Z
	重做	Command + Shift + Z
	复制	Command + C
	粘贴	Command + V
	全选	Command + A
	成组	Command + G
	解组	Command + Shift + G
工具选择	选择工具	V
	矩形工具	R
	椭圆工具	O
	钢笔工具	P
	文本工具	T
视图与显示	放大画布	Command + + (加号)
	缩小画布	Command + – (减号)
	实际大小	Command + 0
	显示/隐藏标尺	Command + R
	显示/隐藏网格	Command + ‘ (单引号)
图层操作	上移一层	Command + ]
	下移一层	Command + [
	移至顶层	Command + Shift + ]
	移至底层	Command + Shift + [
	锁定/解锁选中图层	Command + L
	显示/隐藏选中图层	Command + Shift + H