SwiftUI学习笔记[path绘制]

前言

绘制的底层是强大的,我们所用的各端语言只是在现代UI追求的步伐中和用户喜好的交互中求同存异，抽取封装出自成个性风格的UI控件,当然面对万亿级别的客户各个平台的UI库出也不可能满足所有的客户需求,当然一门语言的可制定性也意味着其强大,几乎每个平台都提供了接口让开发者创造其UI的可能性,更可能的能满足客户需求。

一,Path 绘制【直线、圆弧、圆锥曲线、贝塞尔曲线等】

1.Path

• SwiftUI两种方式来自定义绘图：路径(path)和形状(shaper)。路径是一系列绘图指令，例如:从这里开始moveTo到哪里lineTo，在哪里添加形状例如增加矩形，圆圈，椭圆，曲线其他的线段等addRect,addCircle,addPath...”，所有这些都使用绝对坐标。形状是用路径构建的，所以一旦你理解了路径，形状就很容易了。而且，就像路径、颜色和渐变一样，形状也是视图，这意味着我们可以将它们与文本视图、图像等一起配合使用。

  方法	作用	案例
  path	绘制的基本单位	path.很多方法【move,addLine,addLines,addArc…】
  move	即从哪一点开始	path.move(to: CGPoint(x:0, y:0))
  addLine	连接到某一点	path.addLine(to: CGPoint(x:100, y:100))

1.0 在SwiftUI直接可在视图中进行Path绘制即当作是视图来使用:

struct SwiftUI_Path01: View {
    var screenBounds:CGRect = UIScreen.main.bounds//mainScreen().bounds
    var body: some View {
        //直接绘制
        Path{path in
           
        }.stroke(Color.red, lineWidth:3)
        .border(Color.blue,width:2)
    }
}

2.0 SwiftUI中可以实现Shape来进行绘制:

//实现Shape
struct DaoShaper:Shape{
    func path(in rect: CGRect) -> Path {
        var path=Path()
        //...相关绘制操作。
        return path
    }
    
}
//调用
struct SwiftUI_Path01: View {
    var screenBounds:CGRect = UIScreen.main.bounds//mainScreen().bounds
    var body: some View {
        //直接绘制
       DaoShaper().stroke(Color.red, lineWidth:3)
        .border(Color.blue,width:2)
    }
}

2.Path画线

绘制会在视图中进行，写过Android和Flutter以及H5的都知道,默认的绘制坐标系原点默认都在画布canvas的左上角,如果画布占满屏幕也就是屏幕的左上角。我们绘制一个从（0,0）开始到（100,100）的线段，我们来测验是否同其他端一样:

struct SwiftUI_Path01: View {
    var screenBounds:CGRect = UIScreen.main.bounds//mainScreen().bounds
    var body: some View {
        //由于Path也是视图我们可以直接在View里面进行绘制如下。
        Path{path in
            path.move(to: CGPoint(x:0, y:0))
            path.addLine(to: CGPoint(x:100, y:100))
        }.stroke(Color.red, lineWidth:3)//stroke设置path颜色？
        .border(Color.blue,width:2)//border给画布绘制边框
    }
}


struct SwiftUI_Path01_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUI_Path01()
    }
}

3.Path画网格

坐标系如下:左上角是原点,右下方是正方向也就意味着屏幕左上角坐标为(0,0),屏幕左下角坐标为(0,screenHeight),屏幕右上角为(0,scrrenWidth),屏幕右下角为(screenWidth,scrrenHeight),相当于数学坐标系的第一象限。
<