二、设置绘制属性
在SwiftUI中，完成了图形的定义是一步，之后我们还需要将图形描边绘制或填充绘制。无论是描边绘制还是填充绘制，我们都可以定制化的对绘制属性进行控制，例如下面的示例代码：
struct DrawTestView:View {
var body: some View {
VStack {
Path { path in
let width = 200
let height = 0
path.move(to: CGPoint(x: width, y: height))
path.addLine(to: CGPoint(x: 100, y: 200))
path.addLine(to: CGPoint(x: 200, y: 400))
path.addLine(to: CGPoint(x: 300, y: 200))
path.addLine(to: CGPoint(x: 200, y: 0))
}.stroke(style: StrokeStyle(lineWidth: 3, lineCap: CGLineCap.butt, lineJoin: .bevel, miterLimit: 2, dash: [15,4], dashPhase: 2)).foregroundColor(.blue)
Path { path in
let width = 200
let height = 20
path.move(to: CGPoint(x: width, y: height))
path.addLine(to: CGPoint(x: 100, y: 220))
path.addLine(to: CGPoint(x: 200, y: 420))
path.addLine(to: CGPoint(x: 300, y: 220))
}.fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .top, endPoint: .bottom))
}
}
}
效果如下图所示：
对于描边绘制，我们可以设置线的风格，间距，转角风格等。对于填充绘制，我们可以为其设置渐变填充，上面代码示例的是线性渐变效果，系统还提供了圆心渐变等功能。
三、简单的图形变换和组合
有规律的对绘制的图形进行变换和组合往往可以得到非常美观的复合图形，例如对于上面绘制的菱形，我们可以通过修改透明度进行图形组合，并使用旋转变换的方式使其构建出更加美观的图标，修改代码如下：
struct DrawTestView:View {
let angle:Angle
var body: some View {
Path { path in
let width = 250
let height = 150
path.move(to: CGPoint(x: width, y: height))
path.addLine(to: CGPoint(x: 100, y: 300))
path.addLine(to: CGPoint(x: 200, y: 450))
path.addLine(to: CGPoint(x: 300, y: 100))
}.fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .top, endPoint: .bottom)).rotationEffect(angle, anchor: .center)
}
}
struct DrawContent:View {
var body: some View {
ZStack{
ForEach(0 ..< 10) { i in
DrawTestView(angle: Angle(degrees:Double(36*i))).opacity(0.3)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
DrawContent()
}
}
效果如下图所示：
