[英]How to draw circle with semi line in middle with swift UI for a button background?
I want to draw a shape that is already drawn on Android side as:我想绘制一个已经在 Android 端绘制的形状:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false">
<stroke
android:width="2dp"
android:color="@color/color_boader" />
</shape>
I have set it as button background that has "Sign Up" written on it as in the following image:我已将其设置为按钮背景,上面写有“注册”,如下图所示:
I want to do the same in iOS with SwiftUI.我想用 SwiftUI 在 iOS 中做同样的事情。 I have tried following with ZStack:
我尝试使用 ZStack 进行以下操作:
ZStack(alignment: .trailing) {
Spacer()
.frame(width: 40, height: 2)
.background(Color.boader)
Text("Sign up")
.foregroundColor(.white)
.padding()
.padding()
.overlay(
Circle()
.stroke(Color.boader, lineWidth: 2))
.offset(x: 20)
}
Is there any better way to achieve this?有没有更好的方法来实现这一目标?
You can make your own Shape
using Path
and then use this shape as background for other view:您可以使用
Path
制作自己的Shape
,然后将此形状用作其他视图的背景:
struct ButtonWithSpecialRing: View {
var body: some View {
Button(action: {
print("signed in")
}) {
Text("Sign up!")
.background(CircleWithSemiLine()
.stroke()
.foregroundColor(.gray))
}
}
}
struct CircleWithSemiLine: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
let radius = rect.size.width / 2
path.addArc(center: CGPoint(x: radius, y: radius / 2), radius: radius, startAngle: .degrees(0), endAngle: .degrees(360), clockwise: false)
path.addLine(to: CGPoint(x: radius , y: radius / 2)) // you may play with radius to fit text
return path
}
}
You can play with offset a little or with radius
for better centering.您可以稍微偏移或使用
radius
来更好地居中。 I had achieved only this result for a short time, but you can go further:我在短时间内只取得了这个结果,但你可以更进一步:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.