如何在SwiftUI中排列圆形以创建三位一体。

huangapple
go评论92阅读模式
英文:

How to arrange Circles to make Trinity in SwiftUI

问题

使用

  1. ZStack {
  2.     Circle()
  3.         .frame(width: width * 0.73, height: width * 0.2)
  4.     
  5.     Circle()
  6.         .frame(width: width * 0.73, height: width * 0.2)
  7.     
  8.     Circle()
  9.         .frame(width: width * 0.73, height: width * 0.2)
  10. }

请不要关心细节，只关注圆的位置。因为如果我们将两个圆在y轴上分别偏移-10和10，并将第三个圆在x轴上向上移动10，它将不再完美居中。

请帮忙，如何使用圆形进行完美的三位一体排列的数学计算是什么？

英文:

The desired outcome

Using

  1. ZStack {
  2.     Circle()
  3.         .frame(width: width * 0.73, height: width * 0.2)
  4.     
  5.     Circle()
  6.         .frame(width: width * 0.73, height: width * 0.2)
  7.     
  8.     Circle()
  9.         .frame(width: width * 0.73, height: width * 0.2)
  10. }

Don't care about details here, but the position of circles. Because if we offset two circles one by -10 and other by 10 in y axis, and move up the third circle in x axis by 10, it no longer perfectly centers.

Please help, what's the math in forming a perfect trinity using Circles?

答案1

得分: 1

以下是翻译好的部分：

  1. 以下的代码在视图中显示了一个 `trinity`。
  3. struct ContentView: View {
  4.     let radius = CGFloat(222)
  6.     var body: some View {
  7.         ZStack {
  8.             Circle().stroke(lineWidth: 4)
  9.                 .offset(CGSize(width: -radius/4, height: radius/2))
  11.             Circle().stroke(lineWidth: 4)
  13.             Circle().stroke(lineWidth: 4)
  14.                 .offset(CGSize(width: radius/4, height: radius/2))
  15.         }
  16.          .frame(width: radius, height: radius)
  17.     }
  18. }
  20. EDIT-1:
  22. 为了突出重要部分，`ZStack` 的 `.frame(width: radius, height: radius)`
  24. struct ContentView: View {
  25.     var body: some View {
  26.         VStack {
  27.             Text("Trinity")
  28.             TrinityView(radius: CGFloat(123))
  29.         }
  30.         .frame(width: 333, height: 333)
  31.     }
  32. }
  34. struct TrinityView: View {
  35.     let radius: CGFloat
  37.     var body: some View {
  38.         ZStack {
  39.             Circle().stroke(lineWidth: 4).offset(x: -radius/4, y: radius/2)
  40.                 .foregroundColor(.red)
  41.             Circle().stroke(lineWidth: 4)
  42.                 .foregroundColor(.blue)
  43.             Circle().stroke(lineWidth: 4).offset(x: radius/4, y: radius/2)
  44.                 .foregroundColor(.green)
  45.         }.frame(width: radius, height: radius)
  46.     }
  47. }
英文:

The following code displays a trinity in a view.

  1. struct ContentView: View {
  2.     let radius = CGFloat(222)
  4.     var body: some View {
  5.         ZStack {
  6.             Circle().stroke(lineWidth: 4)
  7.                 .offset(CGSize(width: -radius/4, height: radius/2))
  8.             
  9.             Circle().stroke(lineWidth: 4)
  10.             
  11.             Circle().stroke(lineWidth: 4)
  12.                 .offset(CGSize(width: radius/4, height: radius/2))
  13.         }
  14.          .frame(width: radius, height: radius)
  15.     }
  16. }

EDIT-1:

to highlight the important part, the .frame(width: radius, height: radius) of the ZStack

  1. struct ContentView: View {
  2.     var body: some View {
  3.         VStack {
  4.             Text("Trinity")
  5.             TrinityView(radius: CGFloat(123))
  6.         }
  7.         .frame(width: 333, height: 333)
  8.     }
  9. }
  11. struct TrinityView: View {
  12.     let radius: CGFloat
  13.     
  14.     var body: some View {
  15.         ZStack {
  16.             Circle().stroke(lineWidth: 4).offset(x: -radius/4, y: radius/2)
  17.                 .foregroundColor(.red)
  18.             Circle().stroke(lineWidth: 4)
  19.                 .foregroundColor(.blue)
  20.             Circle().stroke(lineWidth: 4).offset(x: radius/4, y: radius/2)
  21.                 .foregroundColor(.green)
  22.         }.frame(width: radius, height: radius)
  23.     }
  24. }

huangapple
  • 本文由 发表于 2023年6月9日 13:55:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/76437558.html
  • geometry
  • swiftui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定