文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一篇学会使用 SwiftUI 创建万花尺

2024-12-03 00:59

关注

本文转载自微信公众号「Swift社区」,作者韦弦Zhy。转载本文请联系Swift社区公众号。

为了完成一些真正意义上的绘图工作,我将带您通过创建一个简单的带 SwiftUI 的 spirograph。“Spirograph”是一种玩具的商标名称,你把一支铅笔放在一个圆圈里,然后绕着另一个圆圈的圆周旋转,创造出各种几何图案,称为轮盘赌——就像赌场游戏一样。

这段代码包含一个非常具体的公式。我会解释的,但是如果你不感兴趣的话,跳过这一章是完全可以的——这只是为了好玩,这里没有介绍新的 Swift 或 SwiftUI。

我们的算法有四个输入:

因此,让我们开始吧:

  1. struct Spirograph: Shape { 
  2.     let innerRadius: Int 
  3.     let outerRadius: Int 
  4.     let distance: Int 
  5.     let amount: CGFloat 

然后,我们从数据中准备三个值,从内半径和外半径的最大公约数(GCD)开始。计算两个数字的GCD通常是用Euclid算法完成的,它的形式稍微简化如下:

  1. func gcd(_ a: Int,  _ b: Int) -> Int { 
  2.     var a = a 
  3.     var b = b 
  4.     while b != 0 { 
  5.         let temp = b 
  6.         b = a % b 
  7.         a = temp 
  8.     } 
  9.     return a 

把这个方法添加到Spirograph结构体中。

另外两个值是内半径和外半径之间的差异,以及我们需要执行多少步骤来绘制轮盘——这是360度乘以外半径除以最大公约数,再乘以我们的数量输入。我们所有的输入以整数形式提供时效果最好,但是在绘制轮盘赌时,我们需要使用CGFloat,因此我们还将创建输入的CGFloat副本。

现在将这个path(in:)方法添加到Spirograph结构体:

  1. func path(in rect: CGRect) -> Path { 
  2.     let divisor = gcd(innerRadius, outerRadius) 
  3.     let outerRadius = CGFloat(self.outerRadius) 
  4.     let innerRadius = CGFloat(self.innerRadius) 
  5.     let distance = CGFloat(self.distance) 
  6.     let difference = innerRadius - outerRadius 
  7.     let endPoint = ceil(2 * CGFloat.pi * outerRadius / CGFloat(divisor)) * amount 
  8.  
  9.     // more code to come 

最后,我们可以通过循环从 0 到我们的终点来画轮盘赌,并放置在精确的 X/Y 坐标点。计算循环中给定点的 X/Y 坐标(称为“theta:θ”)是真正的数学来源,但老实说,我只是把维基百科上的标准方程式转换成 Swift ——这不是我梦寐以求的记忆!

这是核心算法,但我们要做两个小的改变:我们要分别将绘图矩形的一半宽度或高度添加到X和Y,使其在绘图空间中居中;如果 θ 为 0,即如果这是轮盘中绘制的第一个点,我们将我们的路径中调用move(to:)而不是addLine(to:)。

以下是path(in:)方法的最后一个代码——用以下内容替换// more code to come注释:

  1. var path = Path() 
  2.  
  3. for theta in stride(from: 0, through: endPoint, by: 0.01) { 
  4.     var x = difference * cos(theta) + distance * cos(difference / outerRadius * theta) 
  5.     var y = difference * sin(theta) - distance * sin(difference / outerRadius * theta) 
  6.  
  7.     x += rect.width / 2 
  8.     y += rect.height / 2 
  9.  
  10.     if theta == 0 { 
  11.         path.move(to: CGPoint(x: x, y: y)) 
  12.     } else { 
  13.         path.addLine(to: CGPoint(x: x, y: y)) 
  14.     } 
  15.  
  16. return path 

我意识到这有很多繁重的数学,但回报即将到来:我们现在可以在视图中使用该形状,添加各种滑块来控制内半径、外半径、距离、数量,甚至颜色:

  1. struct ContentView: View { 
  2.     @State private var innerRadius = 125.0 
  3.     @State private var outerRadius = 75.0 
  4.     @State private var distance = 25.0 
  5.     @State private var amount: CGFloat = 1.0 
  6.     @State private var hue = 0.6 
  7.  
  8.     var body: some View { 
  9.         VStack(spacing: 0) { 
  10.             Spacer() 
  11.  
  12.             Spirograph(innerRadius: Int(innerRadius), outerRadius: Int(outerRadius), distance: Int(distance), amount: amount) 
  13.                 .stroke(Color(hue: hue, saturation: 1, brightness: 1), lineWidth: 1) 
  14.                 .frame(width: 300, height: 300) 
  15.  
  16.             Spacer() 
  17.  
  18.             Group { 
  19.                 Text("Inner radius: \(Int(innerRadius))"
  20.                 Slider(value: $innerRadius, in: 10...150, step: 1) 
  21.                     .padding([.horizontal, .bottom]) 
  22.  
  23.                 Text("Outer radius: \(Int(outerRadius))"
  24.                 Slider(value: $outerRadius, in: 10...150, step: 1) 
  25.                     .padding([.horizontal, .bottom]) 
  26.  
  27.                 Text("Distance: \(Int(distance))"
  28.                 Slider(value: $distance, in: 1...150, step: 1) 
  29.                     .padding([.horizontal, .bottom]) 
  30.  
  31.                 Text("Amount: \(amount, specifier: "%.2f")"
  32.                 Slider(value: $amount) 
  33.                     .padding([.horizontal, .bottom]) 
  34.  
  35.                 Text("Color"
  36.                 Slider(value: $hue) 
  37.                     .padding(.horizontal) 
  38.             } 
  39.         } 
  40.     } 

这是很多代码,但我希望你花时间运行应用程序,并欣赏有多么美丽的轮盘。你所看到的其实只是一种轮盘赌形式,被称为 hypotrochoid ——通过对算法的小调整,你可以生成 epitrochoids 等,它们以不同的方式很漂亮。

在我结束之前,我想提醒你,这里使用的参数方程是数学标准,而不是我刚刚发明的东西——我真的去百度了关于 hypotrochoids[1] 的页面,并将它们转换为 Swift。

参考资料

[1]hypotrochoids: http://www.durangobill.com/Trochoids.html

 

来源:Swift社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯