ios - SwiftUI 圆位置 x 和 y
问题描述
我很难找出正确的方法来找到要放置的 x 和 y 坐标,以及我正在制作的进度视图的正确位置Image
。overlay
我希望最终结果看起来像屏幕截图,只是不确定我会使用什么公式。我的数学技能至少可以说是低于标准的。
GeometryReader { geometry in
ZStack {
Circle()
.trim(from: 0.0, to: 0.5)
.stroke(Color.blue, style: StrokeStyle(lineWidth: 5))
.rotationEffect(.degrees(-180))
.frame(width: geometry.size.width)
.opacity(0.5)
.overlay(Circle()
.trim(from: 0.0, to: CGFloat(configuration.fractionCompleted ?? 0) / 2)
.stroke(Color.blue, style: StrokeStyle(lineWidth: 5))
.rotationEffect(.degrees(-180))
.frame(width: geometry.size.width).overlay(
Circle()
.frame(width: 20, height: 20)
.position(x: 0, y: 0)
}
}
解决方案
您只需要非常基本的几何图形
您需要获取C
点坐标。跟着这张图,就可以了(x, height / 2 - y)
。
要让y
你知道sin α = CD/CA
,就像ACD
直角三角形一样。从哪里y = r * sin α
因为x
我们看一下同一个三角形,但取 cos: cos α = AD/CA
, cos α = (r-x)/r
=>x = r - r * cos α = r * (1 - cos α)
你需要的最后一件事是α
它很简单:半圆的最后一点 if Pi
,所以你只需要将它与进度相乘。
struct ContentView: View {
@State
var progress: CGFloat = 0
var body: some View {
GeometryReader { geometry in
let diameter = geometry.size.width
let radius = diameter / 2
let angle = progress * .pi
ZStack {
Circle()
.trim(from: 0.0, to: 0.5)
.stroke(Color.blue, style: StrokeStyle(lineWidth: 5))
.rotationEffect(.degrees(-180))
.frame(width: diameter)
.opacity(0.5)
.overlay(
Circle()
.trim(from: 0.0, to: progress / 2)
.stroke(Color.blue, style: StrokeStyle(lineWidth: 5))
.rotationEffect(.degrees(-180))
.frame(width: diameter)
.overlay(
Circle()
.frame(width: 20, height: 20)
.position(
x: radius * (1 - cos(angle)),
y: geometry.size.height / 2 - radius * sin(angle)
)
)
)
}
}.onAppear {
Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { timer in
withAnimation {
progress += 0.04
}
if progress >= 1 {
timer.invalidate()
}
}
}
}
}
推荐阅读
- android - Android TV 中的谷歌助手和应用操作问题
- spring - 不要使用 RestTemplate 向服务发出相同的 http 请求,而是在不使用数据库的情况下将响应缓存在某处?
- flutter - 应该只有一项具有 [DropdownButton] 的值
- angular - Angular 应用程序在完全加载之前显示屏幕空白
- google-cloud-platform - 将 Google 托管的 ssl 证书与 dockerized uwsgi 应用程序一起使用
- css - 带有 flexbox 的 CSS 定位元素
- javascript - 我有这个错误-> Uncaught TypeError: _this.props.login is not a function
- javascript - Am4Chart 树图:如何在多级树图中加载默认级别为 2 的图表?
- r - 将向量加入r中的数据框
- php - Guzzle 7 - 403 Forbidden(适用于 CURL)