UIBezierPath一步一步画

let v = UIView.init(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
v.backgroundColor = .blue
view.addSubview(v)
v.center = view.center

1. 完成一次封闭，画出一个正方形

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 0, y: 50))
path.addLine(to: CGPoint(x: 10, y: 50))
path.addLine(to: CGPoint(x: 10, y: 0))
path.addLine(to: CGPoint(x: 0, y: 0))
let drawLayer = CAShapeLayer()
drawLayer.path = path.cgPath
drawLayer.fillColor = UIColor.red.cgColor
v.layer.addSublayer(drawLayer)

2. 完成一次封闭，弧形

let path = UIBezierPath()
第一步：将起点设置在(300,300)
path.move(to: CGPoint(x: 300, y: 300))
第二步：画一条至(0,300)的路径
path.addLine(to: CGPoint(x: 0, y: 300))
第三步：以(300,300)画一条至(300,0)的曲线
path.addArc(withCenter: CGPoint(x: 300, y: 300), radius: 300, startAngle: .pi, endAngle: .pi*1.5, clockwise: true)
第四步：返回起点(300,300)
path.addLine(to: CGPoint(x: 300, y: 300))
path.close()

画出一个弧形：

let path = UIBezierPath()
path.move(to: CGPoint(x: 300 - 100, y: 300))
path.addLine(to: CGPoint(x: 0, y: 300))
path.addArc(withCenter: CGPoint(x: 300, y: 300), radius: 300, startAngle: .pi, endAngle: .pi*1.5, clockwise: true)
path.addLine(to: CGPoint(x: 300, y: 300 - 100))
path.addArc(withCenter: CGPoint(x: 300, y: 300), radius: 100, startAngle: .pi*1.5, endAngle: .pi, clockwise: false)
path.close()

截屏2023-03-27 11.26.44.png

二次贝塞尔曲线

截屏2023-03-27 13.25.17.png

let path = UIBezierPath()
path.move(to: CGPoint(x: 300, y: 300))
path.addLine(to: CGPoint(x: 100, y: 300))
path.addQuadCurve(to: CGPoint(x: 300, y: 100), controlPoint: CGPoint(x: 0, y: 200))
path.addLine(to: CGPoint(x: 300, y: 300))
path.close()

controlPoint控制曲线幅度

controlPoint

三次贝塞尔曲线:

path.addCurve(to: CGPoint(x: 300, y: 100), controlPoint1: CGPoint(x: 0, y: 200), controlPoint2: CGPoint(x: 250, y: 200))

其中controlPoint1、controlPoint2是控制曲线幅度的

controlPoint1、controlPoint2