๐ ฟ๏ธShape
Last updated
Last updated
Shape is a "push-out" view.
Polygon - an animatable polygon shape.
What's the difference between Shape and Pathโ
Path ๆฏไธๅ struct๏ผไธป่ฆๆฏ็จ็ตๅฐๅบงๆจ (absolute coordinates) ไพ็ซ่ทฏๅพใ
Shape ๆฏไธๅ protocol๏ผ้คไบๅฏไปฅ็จ็ตๅฐๅบงๆจ็ซ่ทฏๅพๅค๏ผๅฟ ่ฆๅฏฆ็พ็ .path(in: rect) ๆนๆณไนๆไพไบไธๅ CGRect ๅๆธ๏ผ่ฎๆๅๅฏไปฅๆ นๆ container ็็ธๅฐไฝ็ฝฎไพ็ซ่ทฏๅพใ
๐ Hacking with Swift - Paths vs shapes in SwiftUI
SwiftUI โฉ
SwiftOnTap โฉ View โฉ .clipShape(_:style:) โ some View
inherits from View, Animatable.
Path conforms to Shape.
can have Animations.
can be Filled.
can be clipped using even-odd fill mode.
import SwiftUI
import PlaygroundSupport
// ContentView
struct ContentView: View {
// body
var body: some View {
VStack{
hstack1
hstack2
}.padding()
}
var hstack1: some View {
HStack{
Group{
Triangle()
.stroke()
Triangle()
.fill(Color.red)
Triangle()
.stroke(Color.red, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
Arc(start: 110, end: 0, clockwise: true)
.stroke(lineWidth: 10)
.stroke(lineWidth: 5)
.stroke()
}
.frame(width: 100, height: 100)
.border(Color.orange)
}
}
var hstack2: some View {
HStack{
Group{
Arc(start: 90, end: 0, clockwise: true)
.stroke(Color.blue, lineWidth: 20)
Arc(start: 0, end: 270, clockwise: true)
.stroke(Color.pink, lineWidth: 8)
}
.frame(width: 208, height: 100)
.border(Color.yellow)
}
}
}
PlaygroundPage.current.setLiveView(ContentView())
import SwiftUI
import Vector2D // for API: rect.center ...
struct Arc: Shape {
var start: Double // in degrees
var end: Double // in degrees
var clockwise: Bool
func path(in rect: CGRect) -> Path {
Path { path in
path.addArc(
center: rect.center,
radius: rect.minSide / 2,
startAngle: .degrees(start),
endAngle: .degrees(end),
clockwise: !clockwise
)
}
}
}
import SwiftUI
import Vector2D // for API: rect.top ...
struct Triangle: Shape {
func path(in rect: CGRect) -> Path {
Path { path in
path.move(to: rect.top)
path.addLine(to: rect.bottomLeft)
path.addLine(to: rect.bottomRight)
path.addLine(to: rect.top)
}
}
}
Shape โฉ .path(in:)