iOS贝塞尔曲线UIBezierPath

最新推荐文章于 2025-06-23 15:45:50 发布

原创

最新推荐文章于 2025-06-23 15:45:50 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #core graphics

本文介绍了iOS中贝塞尔曲线的概念及其使用，包括UIBezierPath的基本步骤、绘制环境、线条和填充颜色的设置。通过示例展示了在drawRect中绘制和结合CAShapeLayer的应用，并探讨了贝塞尔曲线的公式，从一阶到高阶的详细解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

贝塞尔(Bezier)曲线，应用于二维图形应用的数学曲线，依据四个位置任意的点坐标绘制出一条光滑曲线。由线段和节点组成,节点是可拖动的节点，线段像可伸缩的皮筋。通过控制起始点，终止点以及两个相互分离的中间点来绘制图形。皮筋效应：随着点有规律的移动，曲线将产生皮筋伸缩一样的变换。
贝塞尔曲线于1962年由法国数学家皮埃尔·贝塞尔(Pierre Bézier)所发表，他运用贝塞尔曲线为汽车的主体进行设计。而该曲线最早由Paul de Castejau于1959年运用de Casteljau演算法开发。

使用

基本步骤

1.创建UIBezierPath对象；
2.设置初始点;
3.添加直线或曲线；
4.设置线条属性

使用环境:

1.在drawRect中进行绘制
2.结合CAShapeLayer,通过CAShapeLayer的path属性将UIBezierPath赋给图层;

绘制过程中线条颜色与填充颜色的设置

// 当前绘制上下文设置颜色,之后直接调用stroke或者fill则会以相应的颜色进行绘制.有点像先选择画笔(setStroke,setFill)，然后进行绘制(stroke,fill)
[[UIColor greenColor] setStroke];
[[UIColor redColor] setFill];

UIBezierPath *path = ...
[path stroke];
[path fill];

Demo

drawRect中绘制

// 绘制二级贝塞尔曲线
[[UIColor greenColor] setStroke];

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10, 100)];
[path addQuadCurveToPoint:CGPointMake(70, 100) controlPoint:CGPointMake(47, 170)];
[path setLineWidth:3];
[path stroke];

结合CAShapeLayer

// 绘制一个椭圆，宽高相等则是圆
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CG

最低0.47元/天解锁文章

200万优质内容无限畅学