前言
绘制
的底层是强大的,我们所用的各端语言只是在现代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),相当于数学
坐标系的第一象限
。