如何解决如何创建SwiftUI RoundedStar形状?
SwiftUI具有一个RoundedRectangle
Shape
。最好有一个五角星,其圆角的尖端可以用于填充,剪辑和动画。
此Stack Overflow answer显示了如何使用RoundedStar
将UIView
作为自定义UIBezierPath
。
如何将此代码作为SwiftUI
改编为Shape
并进行动画处理?
解决方法
这是RoundedStar
代码,适合作为可动画的SwiftUI Shape
:
// Five-point star with rounded tips
struct RoundedStar: Shape {
var cornerRadius: CGFloat
var animatableData: CGFloat {
get { return cornerRadius }
set { cornerRadius = newValue }
}
func path(in rect: CGRect) -> Path {
var path = Path()
let center = CGPoint(x: rect.width / 2,y: rect.height / 2)
let r = rect.width / 2
let rc = cornerRadius
let rn = r * 0.95 - rc
// start angle at -18 degrees so that it points up
var cangle = -18.0
for i in 1 ... 5 {
// compute center point of tip arc
let cc = CGPoint(x: center.x + rn * CGFloat(cos(Angle(degrees: cangle).radians)),y: center.y + rn * CGFloat(sin(Angle(degrees: cangle).radians)))
// compute tangent point along tip arc
let p = CGPoint(x: cc.x + rc * CGFloat(cos(Angle(degrees: cangle - 72).radians)),y: cc.y + rc * CGFloat(sin(Angle(degrees: (cangle - 72)).radians)))
if i == 1 {
path.move(to: p)
} else {
path.addLine(to: p)
}
// add 144 degree arc to draw the corner
path.addArc(center: cc,radius: rc,startAngle: Angle(degrees: cangle - 72),endAngle: Angle(degrees: cangle + 72),clockwise: false)
// Move 144 degrees to the next point in the star
cangle += 144
}
return path
}
}
该代码与UIBezierPath
版本非常相似,不同之处在于它使用新的Angle
类型,可以轻松访问degrees
和radians
。删除了绘制旋转星形的代码,因为使用.rotationEffect(angle:)
视图修饰符可以很容易地将旋转添加到SwiftUI形状。
演示:
这是一个演示,展示了cornerRadius
设置的可动画效果,并显示了全屏星体上各种cornerRadius
设置的外观。
struct ContentView: View {
@State private var radius: CGFloat = 0.0
var body: some View {
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
VStack(spacing: 40) {
Spacer()
RoundedStar(cornerRadius: radius)
.aspectRatio(1,contentMode: .fit)
.foregroundColor(.yellow)
.overlay(Text(" cornerRadius: \(Int(self.radius)) ").font(.body))
HStack {
ForEach([0,10,20,40,80,200],id: \.self) { value in
Button(String(value)) {
withAnimation(.easeInOut(duration: 0.3)) {
self.radius = CGFloat(value)
}
}
.frame(width: 50,height: 50)
.foregroundColor(.black)
.background(Color.yellow.cornerRadius(8))
}
}
Spacer()
}
}
}
}
在iPad上的Swift Playgrounds中运行
这可以在iPad的Swift Playgrounds应用程序中完美运行。只需添加:
import PlaygroundSupport
在顶部,
PlaygroundPage.current.setLiveView(ContentView())
最后。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。