如何提取自定义形状的线条点与曲线参数构建Swift/SwiftUI路径

核心前提 #

所有矢量形状的底层逻辑，和Swift/SwiftUI的Path构建规则是完全对齐的——都是通过直线顶点、贝塞尔曲线的控制点坐标定义形状轮廓，完全不用自己从零推导曲率参数，找对提取路径就能直接复用。

从设计软件（Photoshop/Figma/Sketch等）直接提取的标准化流程 #

• 首先保证你制作的形状是未栅格化的矢量形状图层，如果已经转成位图，先做矢量重描边，精度会比原生矢量低，但也能满足基础使用需求
• 将矢量形状直接导出为SVG格式：SVG本身是纯文本存储的矢量标记，里面完整记录了所有路径顶点、曲线控制点的精确坐标，没有任何信息损耗
• 导出时关闭“自动平滑路径点”“简化冗余节点”的开关，尽可能保留你制作形状时的原始节点位置，避免软件自动调整曲率导致和设计稿偏差

提取后的参数转写为Swift代码的匹配规则 #

SVG里的路径指令和SwiftUI的Path方法是一一对应的，不需要额外换算曲率：

• 直线段：SVG的L指令后跟随的坐标值，直接对应Path.addLine(to:)需要传入的顶点坐标
• 三次贝塞尔曲线：SVG的C指令后跟随的两组控制点坐标+终点坐标，完全匹配Path.addCurve(to:control1:control2:)的入参
• 二次贝塞尔曲线：SVG的Q指令后跟随的单组控制点坐标+终点坐标，对应Path.addQuadCurve(to:control:)的入参
• 可以使用本地运行的路径转换工具，直接把导出的SVG路径文本批量转成可运行的Swift代码，不需要手动逐行抄坐标

无矢量源文件时的手动提取计算方法 #

如果只有形状位图、没有原始设计源文件，可以按固定步骤计算参数：

• 先统一坐标系：将形状位图对齐到像素网格，把形状的左上角点设为坐标原点，和SwiftUI默认的左上角(0,0)的坐标方向保持一致，省掉后期坐标翻转的换算步骤
• 直线顶点提取：沿着形状轮廓找出所有方向转折的硬拐点，标记每个拐点的像素坐标，这些就是直线段的顶点值
• 曲线参数提取：对每个独立曲线段，找到曲线的两个端点；分别在两个端点位置做和轮廓相切的辅助线，两条切线的交点就是贝塞尔曲线的远端控制点位置，通过这个方法算出的曲率和原形状拟合度极高
• 提取完成后可以在SwiftUI中先渲染草稿，对比原形状的轮廓偏差，微调控制点坐标即可匹配效果

注意：提取坐标时一定要在1:1缩放比例下操作，不要在放大/缩小状态下标记点位，避免出现比例失真的问题。

内容的提问来源于stack exchange，提问作者swiftPunk