SwiftUI四绘制路径和形状

代码下载

创建徽章视图

创建徽章前需要使用SwiftUI的矢量绘画API创建一个徽章视图

1、新建HexagonParameters.swift文件。HexagonParameters结构体定义了绘制徽章六边形形状的控制点参数。仅仅使用这些数据指定绘制徽章形状时，线段和曲线的控制点位置：

import SwiftUIstruct HexagonParameters {struct Segment {let useWidth: (CGFloat, CGFloat, CGFloat)let xFactors: (CGFloat, CGFloat, CGFloat)let useHeight: (CGFloat, CGFloat, CGFloat)let yFactors: (CGFloat, CGFloat, CGFloat)}static let adjustment: CGFloat = 0.085static let points = [Segment(useWidth:  (1.00, 1.00, 1.00),xFactors:  (0.60, 0.40, 0.50),useHeight: (1.00, 1.00, 0.00),yFactors:  (0.05, 0.05, 0.00)),Segment(useWidth:  (1.00, 1.00, 0.00),xFactors:  (0.05, 0.00, 0.00),useHeight: (1.00, 1.00, 1.00),yFactors:  (0.20 + adjustment, 0.30 + adjustment, 0.25 + adjustment)),Segment(useWidth:  (1.00, 1.00, 0.00),xFactors:  (0.00, 0.05, 0.00),useHeight: (1.00, 1.00, 1.00),yFactors:  (0.70 - adjustment, 0.80 - adjustment, 0.75 - adjustment)),Segment(useWidth:  (1.00, 1.00, 1.00),xFactors:  (0.40, 0.60, 0.50),useHeight: (1.00, 1.00, 1.00),yFactors:  (0.95, 0.95, 1.00)),Segment(useWidth:  (1.00, 1.00, 1.00),xFactors:  (0.95, 1.00, 1.00),useHeight: (1.00, 1.00, 1.00),yFactors:  (0.80 - adjustment, 0.70 - adjustment, 0.75 - adjustment)),Segment(useWidth:  (1.00, 1.00, 1.00),xFactors:  (1.00, 0.95, 1.00),useHeight: (1.00, 1.00, 1.00),yFactors:  (0.30 + adjustment, 0.20 + adjustment, 0.25 + adjustment))]
}

2、选择文件->新建->文件，然后从iOS文件模板列表中选择SwiftUI View。点击下一步(Next)，输入文件名Badge后点击创建(Create)。在Badge.swift文件中，绘制徽章的形状并使用fill修改器给六边形填充颜色，形成一个视图。使用路径可以把多条直线、曲线或其它绘制形状的基本笔划连成一个复杂的图形，就像形成徽章六边形背景这样：

struct Badge: View {var body: some View {Path({ path in})}
}#Preview {Badge()
}

3、给路径添加起点，move(to:)方法可以把绘图光标移动到绘图中的一点，准备绘制的起点。使用六边形的绘制参数数据HexagonParameters，依次绘制六边形的边，形成大致轮廓.addLine(to:)方法会使用当前绘图光标所在点为起点，方法参数中指定的点为终点绘制直线。目前六边形看起来有点问题，不过不要担心，这是意料中的事：

struct Badge: View {var body: some View {Path({ path inlet width: CGFloat = 100let height = widthpath.move(to: CGPoint(x: width*0.95, y: height*0.2))HexagonParameters.points.forEach {path.addLine(to: CGPoint(x: width*$0.useWidth.0*$0.xFactors.0, y: height*$0.useHeight.0*$0.yFactors.0))}}).fill(Color(.black))}
}

4、使用addQuadCurve(to:control:)方法绘制贝塞尔曲线，让六边形的角变的更圆润些。

5、把徽章路径包裹在一个Geometry Reader中，这样徽章可以使用容器的大小，定义自己绘制的尺寸，这样就不需要硬编码绘制尺寸了(100)。当绘制区域不是正方形时，使用绘制区域的最小边长(长宽中哪个最小使用哪个)作为绘制徽章背景的边长，并保持徽章背景的长宽比为1:1。

6、使用xScale和xOffset参数调整变量，把徽章几何绘图区域居中绘制出来。

struct Badge: View {var body: some View {GeometryReader { geometry inPath({ path invar width: CGFloat = min(geometry.size.width, geometry.size.height)let height = widthlet xScale: CGFloat = 0.832let xOffset: CGFloat = (width*(1.0 - xScale))/2.0width *= xScalepath.move(to: CGPoint(x: xOffset + width*0.95, y: height*(0.2 + HexagonParameters.adjustment)))HexagonParameters.points.forEach {path.addLine(to: CGPoint(x: xOffset + width*$0.useWidth.0*$0.xFactors.0, y: height*$0.useHeight.0*$0.yFactors.0))path.addQuadCurve(to: CGPoint(x: xOffset + width*$0.useWidth.1*$0.xFactors.1, y: height*$0.useHeight.1*$0.yFactors.1), control: CGPoint(x: xOffset + width*$0.useWidth.2*$0.xFactors.2, y: height*$0.useHeight.2*$0.yFactors.2))}}).fill(Color(.black))}}
}

7、把黑色实心填充色改为渐变色，使徽章看上去和开始设计的样式一致。渐变色上再使用aspectRatio(_:contentMode:)修改器，让渐变色按内容宽高比进行成比例渐变填充。保持1:1的长宽比，徽章背景可以保持居中在徽章视图中，不管徽章视图本身是不是正方形：

struct Badge: View {var body: some View {GeometryReader { geometry inPath({ path invar width: CGFloat = min(geometry.size.width, geometry.size.height)let height = widthlet xScale: CGFloat = 0.832let xOffset: CGFloat = (width*(1.0 - xScale))/2.0width *= xScalepath.move(to: CGPoint(x: xOffset + width*0.95, y: height*(0.2 + HexagonParameters.adjustment)))HexagonParameters.points.forEach {path.addLine(to: CGPoint(x: xOffset + width*$0.useWidth.0*$0.xFactors.0, y: height*$0.useHeight.0*$0.yFactors.0))path.addQuadCurve(to: CGPoint(x: xOffset + width*$0.useWidth.1*$0.xFactors.1, y: height*$0.useHeight.1*$0.yFactors.1), control: CGPoint(x: xOffset + width*$0.useWidth.2*$0.xFactors.2, y: height*$0.useHeight.2*$0.yFactors.2))}}).fill(LinearGradient(colors: [Badge.gradientStart, Badge.gradientEnd], startPoint: UnitPoint(x: 0.5, y: 0), endPoint: UnitPoint(x: 0.5, y: 0.6))).aspectRatio(1, contentMode: .fit)}}static let gradientStart = Color(red: 239.0/255, green: 120.0/255, blue: 221.0/255)static let gradientEnd = Color(red: 239.0/255, green: 172.0/255, blue: 120.0/255)
}

绘制徽章符号

地标徽章中心有一个以地标App图标中的山峰图形改造形成的标志。山峰这个符号由两个形状组成，一个是表示山顶被雪覆盖的部分，另一个是山体。这里会使用有一定间距的两个局部三角形形状绘制这个徽章符号

1、把之前的徽章视图形状抽出来单独形成一个BadgeBackground视图，并生成一个新的视图文件BadgeBackground.swift：

struct BadgeBackground: View {var body: some View {GeometryReader { geometry inPath({ path invar width: CGFloat = min(geometry.size.width, geometry.size.height)let height = widthlet xScale: CGFloat = 0.832let xOffset: CGFloat = (width*(1.0 - xScale))/2.0width *= xScalepath.move(to: CGPoint(x: xOffset + width*0.95, y: height*(0.2 + HexagonParameters.adjustment)))HexagonParameters.points.forEach {path.addLine(to: CGPoint(x: xOffset + width*$0.useWidth.0*$0.xFactors.0, y: height*$0.useHeight.0*$0.yFactors.0))path.addQuadCurve(to: CGPoint(x: xOffset + width*$0.useWidth.1*$0.xFactors.1, y: height*$0.useHeight.1*$0.yFactors.1), control: CGPoint(x: xOffset + width*$0.useWidth.2*$0.xFactors.2, y: height*$0.useHeight.2*$0.yFactors.2))}}).fill(LinearGradient(colors: [BadgeBackground.gradientStart, BadgeBackground.gradientEnd], startPoint: UnitPoint(x: 0.5, y: 0), endPoint: UnitPoint(x: 0.5, y: 0.6))).aspectRatio(1, contentMode: .fit)}}static let gradientStart = Color(red: 239.0/255, green: 120.0/255, blue: 221.0/255)static let gradientEnd = Color(red: 239.0/255, green: 172.0/255, blue: 120.0/255)
}

2、把BadgeBackground放在Badge的body属性中：

struct Badge: View {var body: some View {BadgeBackground()}
}

3、创建名为BadgeSymbol的自定义视图，这个视图是一个山峰的形状，把这个形状复制多次并按一定角度旋转多次拼成一个徽章的图案。使用pathAPI来绘制徽章符号的上半部分，试着调节spacing、topWidth、topHeight的系数，观察这些系数是怎么影响图形绘制的结果的。绘制徽章图案的下半部分，使用move(to:)把绘图光标移到另一个图形绘制的起点，绘制新的形状，用紫色填充徽章符号：

struct BadgeSymbol: View {static let symbolColor = Color(red: 79.0/255, green: 79.0/255, blue: 191.0/255)var body: some View {GeometryReader { geometry inPath { path in letwidth = min(geometry.size.width, geometry.size.height)let height = width*0.75let spacing = width*0.030let middle = width/2let topWidth = 0.226*widthlet topHeight = 0.488*heightpath.addLines([CGPoint(x: middle, y: spacing),CGPoint(x: middle - topWidth, y: topHeight - spacing),CGPoint(x: middle, y: topHeight/2 + spacing),CGPoint(x: middle + topWidth, y: topHeight - spacing),CGPoint(x: middle, y: spacing)])path.move(to: CGPoint(x: middle, y: topHeight / 2 + spacing * 3))path.addLines([CGPoint(x: middle - topWidth, y: topHeight + spacing),CGPoint(x: spacing, y: height - spacing),CGPoint(x: width - spacing, y: height - spacing),CGPoint(x: middle + topWidth, y: topHeight + spacing),CGPoint(x: middle, y: topHeight/2 + spacing*3)])}.fill(BadgeSymbol.symbolColor)}}
}

组合徽章的前景符号和背景形状

徽章设计思路是在背景形状上面再绘制多个有固定旋转角度的山峰符号。定义一个新的类型用于展示旋转一定角度的徽章符号，使用ForEach生成不同旋转角度的山峰符号，绘制在徽章背景上，从而形成最终的徽章。

1、创建RotatedBadgeSymbol视图封装旋转徽章符号，调整旋转的角度，并在预览视图中查看效果：

struct RotatedBadgeSymbol: View {let angle: Anglevar body: some View {BadgeSymbol().padding(-60).rotationEffect(angle, anchor: .bottom)}
}#Preview {RotatedBadgeSymbol(angle: Angle(degrees: 10))
}

2、在Badge.swift中，使用ZStack把徽章图标放在徽章背景层上面。此时会发现，徽章符号的尺寸相比徽章背景大了许多，这不符合最初设计的预期，缩放符号尺寸到合适的大小。使用ForEach复制多个徽章图标，按360度周解均分，每一个徽章符号都比前一个多旋转45度，这种就会形成一个类似太阳和徽章图标：

struct Badge: View {var badgeSysbols: some View {ForEach(0..<8) { i inRotatedBadgeSymbol(angle: Angle(degrees: Double(i*45)))}.opacity(0.5)}var body: some View {ZStack {BadgeBackground()GeometryReader { geometry inbadgeSysbols.scaleEffect(1.0/4, anchor: .top).position(x: geometry.size.width/2, y: (3.0/4)*geometry.size.height)}}.scaledToFit()}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/850543.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Camtasia Studio怎么自动加字幕呢，Camtasia Studio有什么功能呢

Camtasia Studio怎么自动加字幕呢，Camtasia Studio有什么功能呢

在信息化高度发达的今天&#xff0c;视频作为一种直观、生动的信息表达方式&#xff0c;受到了越来越多人的青睐。无论是教育领域的教学视频&#xff0c;还是企业宣传的推广短片&#xff0c;甚至是个人创作的分享作品&#xff0c;都离不开一款优秀的视频编辑软件。Camtasia Stu…
阅读更多...
【Python数据分析--pandas学习笔记】Python数据分析库pandas详细学习笔记（内容详细，适合小白入门），数据分析学习笔记

【Python数据分析--pandas学习笔记】Python数据分析库pandas详细学习笔记（内容详细，适合小白入门），数据分析学习笔记

一&#xff0c;pandas教程 1-1 pandas 安装 1-1-1 使用 pip 安装 pandas: pip install pandas安装成功后&#xff0c;我们就可以导入 pandas 包使用&#xff1a; import pandas1-1-2 查看 pandas 版本 >>> import pandas >>> pandas.__version__ # 查看…
阅读更多...
减少GPU显存的策略

减少GPU显存的策略

训练时 减少batchsize图片尺寸缩小 推理时 cpu加载模型 pipe.enable_sequential_cpu_offload()减小精度 torch.float32 --> torch.float16其它
阅读更多...
2.组件间通信-自定义事件（子传父）

2.组件间通信-自定义事件（子传父）

子传父 父组件&#xff1a; <template><div class"father"><h3>父组件</h3><h3 v-show"toy">父组件接收到子组件传过来的数据:{{ toy }}</h3><!-- 给子组件Child绑定自定义事件 --><Child send-toy"sa…
阅读更多...
L46---面试题 01.02. 判定是否互为字符重排(排序）---Java版

L46---面试题 01.02. 判定是否互为字符重排(排序）---Java版

1.题目描述 给定两个由小写字母组成的字符串 s1 和 s2&#xff0c;请编写一个程序&#xff0c;确定其中一个字符串的字符重新排列后&#xff0c;能否变成另一个字符串。 示例 1&#xff1a; 输入: s1 “abc”, s2 “bca” 输出: true 示例 2&#xff1a; 输入: s1 “abc”,…
阅读更多...
【面试】哪些类型对应有Class的对象？

【面试】哪些类型对应有Class的对象？

目录 1. 类&#xff08;Class Types&#xff09;2. 接口&#xff08;Interface Types&#xff09;3. 数组类型&#xff08;Array Types&#xff09;4. 基本类型&#xff08;Primitive Types&#xff09;5. 枚举类型&#xff08;Enum Types&#xff09;6. 注解类型&#xff08;A…
阅读更多...
c++ 实现栈、单向队列、双向队列

c++ 实现栈、单向队列、双向队列

一、栈实现 code // // Created by shaoxinHe on 2024/6/8. //#ifndef CPRIMER_MYSTACK_H #define CPRIMER_MYSTACK_H#include "stdexcept" #include "iostream"using namespace std;struct queuNode {int num{};queuNode *next nullptr; };class mySta…
阅读更多...
数据+AI 打造企业的“金山银山”

数据+AI 打造企业的“金山银山”

今日之世界&#xff0c;数据是生产资料&#xff0c;而人工智能&#xff08;AI&#xff09;是生产工具&#xff0c;它们的结合&#xff0c;带来的是业务的增长、新质生产力的提升&#xff0c;就是金山银山。 创新是源动力 凡是到过浙江省安吉县余村的人&#xff0c;应该都会被它…
阅读更多...
2D图片的描边

2D图片的描边

第一种 Sprite 外边框 原理是找到边缘像素&#xff0c;然后设置颜色&#xff0c;边缘像素的特点是像素的八个方向的邻像素不全是透明或者不全是不透明&#xff0c;这样的像素就是边缘上的像素&#xff0c;下面是找到的shader源码&#xff0c;很简单 Shader "Custom/Spri…
阅读更多...
【云原生_K8S系列】Kubernetes 控制器之 Deployment

【云原生_K8S系列】Kubernetes 控制器之 Deployment

在 Kubernetes 中&#xff0c;Deployment 是一种高级控制器&#xff0c;负责管理应用的部署和生命周期。它提供了一种声明性的方式来定义应用的期望状态&#xff0c;并确保实际状态与期望状态保持一致。Deployment 可以自动处理应用的滚动更新、扩展和回滚等任务&#xff0c;是…
阅读更多...
Spring AI 第二讲 之 Chat Model API 第九节 watsonx.ai Chat

Spring AI 第二讲 之 Chat Model API 第九节 watsonx.ai Chat

通过 watsonx.ai&#xff0c;你可以在本地运行各种大型语言模型&#xff08;LLM&#xff09;&#xff0c;并从中生成文本。Spring AI 通过 WatsonxAiChatModel 支持 watsonx.ai 文本生成。 您首先需要拥有一个 watsonx.ai 的 SaaS 实例&#xff08;以及一个 IBM 云帐户&#x…
阅读更多...
Elasticsearch高效检索：基础查询详解

Elasticsearch高效检索：基础查询详解

在当今大数据和云计算的时代&#xff0c;信息的快速检索和高效处理成为了企业竞争的关键。Elasticsearch&#xff0c;作为一款基于Lucene构建的开源、分布式、RESTful搜索引擎&#xff0c;以其强大的全文搜索和结构化搜索能力&#xff0c;赢得了众多开发者和企业的青睐。今天&a…
阅读更多...
web前端复试经验：深度解析与实用指南

web前端复试经验：深度解析与实用指南

web前端复试经验&#xff1a;深度解析与实用指南 在Web前端开发领域的求职过程中&#xff0c;复试无疑是一个至关重要的环节。它既是对求职者技术实力的全面检验&#xff0c;也是展现个人能力与潜力的绝佳机会。本文将围绕四个方面、五个方面、六个方面和七个方面&#xff0c;…
阅读更多...
C++STL（四）priority_queue的详细用法及仿函数实现

C++STL（四）priority_queue的详细用法及仿函数实现

目录 一&#xff1a;&#x1f525;介绍二&#xff1a;&#x1f525;priority_queue 的基本操作三&#xff1a;&#x1f525;priority_queue 的原型定义四&#xff1a;&#x1f525;重写仿函数4.1.仿函数的介绍4.2.priority_queue仿函数代码示例 五&#xff1a;&#x1f525;pri…
阅读更多...
Recognize Anything: A Strong Image Tagging Model（RAM模型使用方法）

Recognize Anything: A Strong Image Tagging Model（RAM模型使用方法）

一、RAM模型介绍 这篇论文介绍了一个名为“Recognize Anything Model”&#xff08;RAM&#xff09;的新型基础模型&#xff0c;专用于图像标签识别&#xff08;图像分类&#xff09;。这一模型采用大规模图像-文本配对数据进行训练&#xff0c;无需手动注释&#xff0c;能够在…
阅读更多...
关于焊点检测（SJ-BIST）模块实现

关于焊点检测（SJ-BIST）模块实现

关于焊点检测&#xff08;SJ-BIST&#xff09;模块实现 语言 &#xff1a;Verilg HDL 、VHDL EDA工具&#xff1a;ISE、Vivado、Quartus II 关于焊点检测&#xff08;SJ-BIST&#xff09;模块实现一、引言二、焊点检测功能的实现方法&#xff08;1&#xff09; 输入接口&#x…
阅读更多...
数据库(28)——联合查询

数据库(28)——联合查询

对于union查询&#xff0c;就是把多次查询的结果合并起来&#xff0c;形成一个新的查询结果集。 语法 SELECT 字段列表 FROM 表A... UNION [ALL] SELECT 字段列表 FROM 表B...; 演示 select * from user where age > 22 union all select * from user where age < 50; u…
阅读更多...
oracle linux和ubuntu的区别

oracle linux和ubuntu的区别

Oracle Linux和Ubuntu是两种不同的Linux发行版&#xff0c;它们有一些区别&#xff1a; 背景和支持&#xff1a; Oracle Linux是由Oracle公司开发和支持的&#xff0c;它是基于Red Hat Enterprise Linux (RHEL)的一个分支。Ubuntu是由Canonical Ltd.开发和支持的&#xff0c;它…
阅读更多...
【Python机器学习】PCA——特征提取（2）

【Python机器学习】PCA——特征提取（2）

上一篇写过了用单一最近邻分类器训练后的精度只有0.22. 现在用PCA。想要度量人脸的相似度&#xff0c;计算原始像素空间中的距离是一种相当糟糕的方法。用像素表示来比较两张图像时&#xff0c;我们比较的是每个像素的灰度值与另一张图像对应位置的像素灰度值。这种表示与人们…
阅读更多...
Vue3 组合式 API：依赖注入（四）

Vue3 组合式 API：依赖注入（四）

provide() provide() 函数是用于依赖注入的一个关键部分。这个函数允许你在组件树中提供一个值或对象&#xff0c;使得任何子组件&#xff08;无论层级多深&#xff09;都能够通过 inject() 函数来访问这些值。 import { provide, ref } from vue; export default { setup(…
阅读更多...
最新文章

Copyright @ 2022~2023