iOS绘图 - UIBezierPath详解

上一篇文章只是简单介绍了绘图的几种方法,你可以根据你的项目选择不同的绘图方法。通过本篇对UIBezierPath有一个详细的了解,帮助你更好的使用UIBezierPath。

学习UIBezierPath之前,我感觉最好是先将UIBezierPath的头文件定义先熟悉一遍,大概了解这个类的属性和方法。

UIBezierPath的工厂方法:

初始化一个贝塞尔对象

+ (instancetype)bezierPath;

初始化一个矩形贝塞尔

+ (instancetype)bezierPathWithRect:(CGRect)rect;

初始化一个矩形的内切圆曲线,想要一个圆的话就传入一个正方形Rect

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

初始化带圆角的贝塞尔,可以用来为UIView扩展添加圆角的方法

//cornerRadius是圆角的半径大小,传入的值最大为rect最长边的一半。rect为正方形传入一半宽时也可以得到一个圆形。常用于绘制圆角
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
//如果想得到对应方向上的圆角,可以通过corners来指定某个角画成圆角
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;

初始化一个圆弧

//center:弧线中心点的坐标
//radius:所画弧线的半径
//startAngle:弧线的起始弧度
//endAngle:弧线的结束弧度
//clockwise:是否是顺时针
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center
                                 radius:(CGFloat)radius
                             startAngle:(CGFloat)startAngle
                               endAngle:(CGFloat)endAngle
                              clockwise:(BOOL)clockwise;

用Core Graphics Path生成一个贝塞尔

+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

下面我们通过demo进一步了解UIBezierPath

构建path

设置起始点

- (void)moveToPoint:(CGPoint)point;

添加一条直线

- (void)addLineToPoint:(CGPoint)point;

添加一条三次贝塞尔曲线路径,一般和- (void)moveToPoint:(CGPoint)point;配合使用,设置三次贝塞尔曲线的起始点,endPint是曲线的终点,通过两个控制点确定曲线的路径


三次贝塞尔曲线
三次贝塞尔曲线
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;

添加一条二次贝塞尔曲线路径,一般和- (void)moveToPoint:(CGPoint)point;配合使用,设置二次贝塞尔曲线的起始点,endPoint是曲线的终点,通过一个控制点确定曲线的路径

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

添加一段弧度路径,具体参数同上

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

闭合路径,得到封闭图形

- (void)closePath;

移除所有的点

- (void)removeAllPoints;

添加路径对象

- (void)appendPath:(UIBezierPath *)bezierPath;

反方向绘制path

- (UIBezierPath *)bezierPathByReversingPath;

根据指定的放射变化矩阵变化路径中的所有点

- (void)applyTransform:(CGAffineTransform)transform;

path信息

//是否包含有效的元素
@property(readonly,getter=isEmpty) BOOL empty;
//路径相对于原点的bounds
@property(nonatomic,readonly) CGRect bounds;
//画笔的当前位置
@property(nonatomic,readonly) CGPoint currentPoint;
//路径是否包含指定点
- (BOOL)containsPoint:(CGPoint)point;

path样式设置

//线宽
@property(nonatomic) CGFloat lineWidth;
//设置线条终点类型
@property(nonatomic) CGLineCap lineCapStyle;
typedef CF_ENUM(int32_t, CGLineCap) {
    kCGLineCapButt,//默认
    kCGLineCapRound,//轻微圆角
    kCGLineCapSquare//正方形
};
//线条连接点样式
@property(nonatomic) CGLineJoin lineJoinStyle;
typedef CF_ENUM(int32_t, CGLineJoin) {
    kCGLineJoinMiter,//尖角
    kCGLineJoinRound,//圆角
    kCGLineJoinBevel//平角
};

//在连接点样式kCGLineJoinMiter时生效(角两个端点之间的距离),如果斜接长度超过miterLimit,边角样式就会变成kCGLineJoinBevel
@property(nonatomic) CGFloat miterLimit; 
//绘图的精细程度,默认是0.6,越小精度越高
@property(nonatomic) CGFloat flatness;
//使用奇偶规则
@property(nonatomic) BOOL usesEvenOddFillRule;

miterLimit


kCGLineJoinMiter.png
//绘制虚线
//pattern:CGFloat pattern[] = { 1.0f, 2.0f };
//count:pattern中的数据个数
//phase: 开始画线型的起始位置
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
- (void)getLineDash:(nullable CGFloat *)pattern count:(nullable NSInteger *)count phase:(nullable CGFloat *)phase;


//填充([[UIColor redColor] setFill]; 设置填充颜色,设置后调用填充方法)
- (void)fill;
//描边([[UIColor redColor] setStroke]; 设置描边颜色,设置后调用描边方法)
- (void)stroke;

//设置填充的混合模式
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;

//设置描边的混合模式
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;

//修改当前图形上下文的绘图区域课件,随后的绘图操作都在执行此方法前的区域中呈现
- (void)addClip;

下一篇我们用UIBezierPath实现一个简单水波效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容