EP07. “向量图形完全指南”

这篇笔记讲 Photopea 的向量图形系统——路径/向量遮罩/形状图层三种储存方式、向量图形的层级结构（Shape→Path→Knot）、怎么编辑既有形状、怎么建立新形状、以及怎么把位图转成向量图（Vectorize）。 前置知识：先看过 EP01-EP06，熟悉图层和选区的基本概念。

重点内容

向量图形是什么：三种储存方式

Photopea 用三种方式储存向量图形工作：

• 路径（Paths）：文件里维护一份"路径清单"，能在 Paths 面板里查看，默认有一个叫 Work Path 的容器，向量图形一开始会自动存在这里
• 向量遮罩（Vector Masks）：任何图层都能加向量遮罩，运作方式跟像素遮罩类似——决定哪部分内容可见。关键优势是：像素遮罩和向量遮罩都能随时开关或编辑，不会改变图层实际的内容
• 形状图层（Shape Layers）：一种特殊图层，只包含向量形状 + 颜色填充/渐变填充/图案填充——本质上就是"填色图层 + 向量遮罩"的组合

[截图：Paths 面板，显示 Work Path、向量遮罩、形状图层三种向量数据的列表]

向量图形的层级结构

Photopea 的向量系统是多层级的结构：Shape（形状） 是最基础的单位，包含多个 Path（路径），路径又由多个 Knot（节点） 组成，每个节点包含三个部件：锚点（anchor）+ 两个控制柄（handles）。

路径与布尔运算：路径在形状里有固定的顺序，用布尔运算决定路径之间怎么互动——每条路径都有一种布尔运算，定义它（比如第四条路径）跟底下内容怎么结合。四种运算：联集（Union）、相减（Subtract）、相交（Intersect）、排除（Exclude）。⚠️ 除了联集之外，路径的顺序会影响运算结果，务必留意排列先后。

节点与曲线：节点之间靠曲线段连接，曲线形状由控制柄决定——节点可以是平滑/连接型（linked/smooth，两个控制柄和锚点在同一条直线上），也可以是尖角/独立型（unlinked/corner，控制柄可以任意摆放）。控制柄也能收拢到锚点位置，这样连接出来的就是直线段而不是曲线。

[截图：Direct Select Tool 选中节点后显示的锚点与两个控制柄，平滑节点与尖角节点的对比]

视觉属性：形状图层支持可自定义的填充（Fill）和描边（Stroke）属性，各自能设成无（None）、纯色、渐变、或图案。描边还有额外参数：粗细、位置（内侧/居中/外侧）、虚线样式。

编辑既有的向量形状

开始编辑：在 Layers 面板点选形状——点向量遮罩缩略图或形状图层缩略图，会显示出可编辑的路径轮廓。

路径选取工具（Path Select Tool）：管理形状里整条路径——点路径能选取，按住 Shift 能多选。选好路径后能：

• 用鼠标或方向键重新定位
• 按 Delete 移除不要的路径
• 跨图层/跨文件剪切/复制/粘贴（Ctrl+X/C/V）
• 套用 Free Transform 变形
• 调整布尔运算（相减、相交等）
• 用上/下按钮调整路径顺序
• 把多条路径合并成一条

直接选取工具（Direct Select Tool）：作用在路径里的节点层级——点路径的轮廓线能看到节点，点节点能选取，按住 Shift 能多选。选好节点后能：

• 用鼠标或方向键移动
• 删除单一节点
• 调整锚点和控制柄
• 双击切换控制柄状态
• 在平滑（连接）节点和尖角（独立）节点之间转换

建立新的向量形状

各建立工具都有 3 种模式：Path（加进既有路径）、Shape（建立新的形状图层）、Pixels（立即栅格化成像素）。在 Path 模式下工作时，也能选择布尔运算方式。

关键工具：

• 钢笔工具（Pen Tool）：逐一节点建立路径——在画面上点击加节点，拖拉能建立控制柄，点回第一个节点能闭合路径
• 自由钢笔工具（Free Pen Tool）：手绘方式画图，自动转换成平滑的向量曲线，能调整容差（tolerance）参数控制平滑程度
• 特定形状工具（矩形/椭圆/直线）：点住拖拉直接画出对应的几何形状路径，按住 Shift 能保持等比例
• 自定义形状工具（Custom Shape Tool）：从现成图库加入复杂形状，也能汇入 CSH 格式的自定义形状收藏
• 参数化形状工具（Parametric Shape Tool）：生成多边形、星形、螺旋这类特殊形状，参数可自定义

文字转向量：右键文字图层选 "Convert to Shape"，能把文字转成向量形状——每个字符会变成各自独立、可编辑节点的路径。

把位图转成向量图（Vectorize Bitmap）

什么是位图矢量化（Bitmap Vectorization）：也叫位图描摹（tracing），能自动把位图（JPG、PNG 等）转换成向量图形。📌 常见场景：手上有一张位图，但它原本其实是向量图（比如 logo），手动重新画一份向量版本很花时间，这时候就能用矢量化功能自动生成。

操作方式：打开位图文件或选中对应图层，Image → Vectorize Bitmap，会打开专属的 Vectorizer 窗口，左右并排显示原始位图和转换出来的向量版本。

可调整参数：

1. 颜色数量（Number of colors）：调整能控制细节程度
2. 降噪（Noise reduction）：系统会针对每张图自动侦测，一般建议保持默认值不要改

导览：能用鼠标平移两侧的图像、用鼠标滚轮调整缩放，方便详细比对。

[截图：Vectorizer 窗口，左右并排显示原始位图和矢量化后的向量版本对比]

输出：满意结果后点 OK，原本的位图图层会被替换成对应的向量图层，之后能继续编辑，或导出成 SVG、PDF 格式。

常见错误

• ❌ 用多条路径做布尔运算时不管顺序——除了联集运算，其他运算（相减、相交、排除）的结果都会受路径顺序影响，调整前先确认路径排列
• ❌ 想调整整条路径的位置却在节点层级操作——路径整体移动/删除用 Path Select Tool；调整单一节点的锚点/控制柄用 Direct Select Tool，两个工具作用的层级不一样
• ❌ 想保留文字图层未来能继续编辑文字内容，却先转成了 Shape——转成 Shape 之后每个字符会变成独立的向量路径节点，没办法再当文字编辑（改文字内容），这个转换是不可逆的，确定不需要再改文字了才转
• ❌ 矢量化位图时随意调整降噪参数——降噪是系统针对每张图自动侦测出来的，一般建议保持默认值，乱调可能让结果变差
• 💡 手上有张位图原本其实是向量图（比如低分辨率的 logo 截图），别急着手动重新画，先试试 Image → Vectorize Bitmap 自动生成，能省下大量重画的时间

Sources

官方文档：

1. Photopea Learn: Vector Graphics — https://www.photopea.com/learn/vector-graphics
2. Photopea Learn: The Structure — https://www.photopea.com/learn/vg-structure
3. Photopea Learn: Editing Shapes — https://www.photopea.com/learn/vg-manipulation
4. Photopea Learn: Creating Shapes — https://www.photopea.com/learn/vg-creating
5. Photopea Learn: Vectorize Bitmap — https://www.photopea.com/learn/vg-vectorize