SwiftUI之自己画图形

SwiftUI之自己画图形
自己画一个正方形，很简单，由于左上角的坐标为（0，0），以此为参考，然后开始画图，需要形成一个闭环

Path { path in
            path.move(to: CGPoint(x: 50, y: 50))
            path.addLine(to: CGPoint(x: 150, y: 50))
            path.addLine(to: CGPoint(x: 150, y: 150))
            path.addLine(to: CGPoint(x: 50, y: 150))
            path.addLine(to: CGPoint(x: 50, y: 50))
       }.fill(Color.red)

在这里插入图片描述
或者画一个三角形

Path { path in
                path.move(to: CGPoint(x: 200, y: 100))
                path.addLine(to: CGPoint(x: 100, y: 300))
                path.addLine(to: CGPoint(x: 300, y: 300))
                path.addLine(to: CGPoint(x: 200, y: 100))
            }
            .fill(Color.blue)

在这里插入图片描述
或者这样的三角形

Path { path in
                path.move(to: CGPoint(x: 200, y: 100))
                path.addLine(to: CGPoint(x: 100, y: 300))
                path.addLine(to: CGPoint(x: 300, y: 300))
                path.addLine(to: CGPoint(x: 200, y: 100))
                path.addLine(to: CGPoint(x: 100, y: 300))
            }.stroke(Color.blue, lineWidth: 10)

在这里插入图片描述
或者画一条线

Path { path in
                path.move(to: CGPoint(x: 200, y: 100))
                path.addLine(to: CGPoint(x: 100, y: 300))
            }.stroke(Color.blue, lineWidth: 10)

在这里插入图片描述
或者一条虚线

Path { path in
                path.move(to: CGPoint(x: 200, y: 100))
                path.addLine(to: CGPoint(x: 200, y: 500))
            }.stroke(Color.blue, style: .init(lineWidth: 4, dash: [22,25], dashPhase: 0))

在这里插入图片描述
只要思想不滑坡，还可以加入曲线

Path{
                path in
                path.addArc(center: .init(x: 100, y: 100), radius: 80, startAngle: .degrees(90), endAngle: .degrees(-270), clockwise: true)
            }.stroke(Color.red, lineWidth: 2)

在这里插入图片描述
感觉数学够好的话，还以画更多的曲线
上个椭圆

Path{
                path in
                path.addEllipse(in: CGRect(x: 0, y: 0, width: 100, height: 200))
            }.stroke(Color.green, lineWidth: 6)

在这里插入图片描述

SwiftUI之自己画图形

猜你喜欢