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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容