Skip to content

绘制徽章符号

地标徽章的中心有一个自定义标志,它由 Landmarks app icon 中的山峰转变而来。

山峰由两个形状组成:一个代表峰顶的雪盖,另一个代表沿途的植被。我们使用两个三角形的形状绘制它们,然后由一个小间隙分开。

第 1 步

从项目 Assets.xcassets 目录中删除空的 AppIcon 目录,然后从下载的本节资源文件夹中把 AppIcon.appiconset 文件夹拖到 Assets.xcassets 目录中。

Xcode 会识别出这个文件夹包含了一个应用程序图标的所有尺寸图,并在目录中创建一个相应的图像。

第 2 步

Views 目录中,为徽章设计中以旋转样式的山形创建一个新的自定义视图,名为 BadgeSymbol.swift

第 3 步

使用路径 API 绘制符号的顶部

试着调整一下与 spacing 、 topWidth 和 topHeight 常量关联的系数,体验它们是如何影响整体形状的。

第 4 步

绘制符号的底部部分。

使用 move(to:) 修饰符在同一路径中的多个形状之间插入间隙。

第 5 步

按照设计稿要求,给符号填充紫色。

第 6 步

Views 目录创建一个新的 RotatedBadgeSymbol SwiftUI View 文件来封装旋转的符号。

试着在预览中调整角度来测试旋转的效果。

绘制徽章符号 has loaded