文档章节

iOS BeizierPath 绘图

GLAlanTong
 GLAlanTong
发布于 2016/03/27 10:09
字数 1287
阅读 101
收藏 2

iOS BeizierPath 绘图

    最近工作,因为是一款理财的产品,所以进度条改成圆,当然也参考了几篇优秀的博文,稍后一一罗列,下面简单介绍:使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。

Bezier Path 基础                                            

    UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。                  我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc),圆或者其他复杂的曲线形状。每一段都包括一个或者多个点,绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集 合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。                               

创建和使用一个path对象的过程是分开的。创建path是第一步,包含一下步骤:                      

(1)创建一个Bezier path对象。                      

(2)使用方法moveToPoint:去设置初始线段的起点。                      

(3)添加line或者curve去定义一个或者多个subpaths。                      

(4)改变UIBezierPath对象跟绘图相关的属性。  

    当创建path,我们应该管理path上面的点相对于原点(0,0),这样我们在随后就可以很容易的移动path了。为了绘制path对象, 我们要用到stroke和fill方法。这些方法在current graphic context下渲染path的line和curve段。  

   下面我们用贝塞尔曲线画一个多边形

-(void)drawRect:(CGRect)rect
{
    
    UIColor *color = [UIColor yellowColor];
    [color set];  //设置线条颜色
    
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    
    aPath.lineWidth = 10.0;//设置线条的粗细
    
    aPath.lineCapStyle = kCGLineCapRound;  //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound;  //终点处理
    
    // 设置多边形最开始的点
    [aPath moveToPoint:CGPointMake(100.0, 0.0)];
    
    // 画相应的线条
    [aPath addLineToPoint:CGPointMake(200.0, 40.0)];
    [aPath addLineToPoint:CGPointMake(160, 140)];
    [aPath addLineToPoint:CGPointMake(40.0, 140)];
    [aPath addLineToPoint:CGPointMake(0.0, 40.0)];
    [aPath closePath]; //第五条线通过调用closePath方法得到的
    
    [aPath stroke]; //Draws line 根据坐标点连线  //填充线条
   // [aPath fill];//图形内部填充
    
}

              

绘制圆

用到这个方法                      

+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect ;

当传入的 rect 是一个正方形时,则绘制一个圆,如果是矩形时,则是椭圆

创建一段弧的方法

+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL )clockwise;

参数介绍:

center:圆弧的中心

radius:半径

startAngle:开始角度

endAngle:结束角度

clockwise:是否顺时针方向


画一段弧形的相关代码

  1. #import "DrawPolygonView.h"
    
    #define pi 3.14159265359
    #define   DEGREES_TO_RADIANS(degrees)  ((pi * degrees)/ 180)
    
    @implementation DrawPolygonView
    
    -(void)drawRect:(CGRect)rect
    {
    
        UIColor *color = [UIColor redColor];
        [color set];  //设置线条颜色
    
        UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
                                                             radius:75
                                                         startAngle:0
                                                           endAngle:DEGREES_TO_RADIANS(135)
                                                          clockwise:YES];
    
        aPath.lineWidth = 5.0;
        aPath.lineCapStyle = kCGLineCapRound;  //线条拐角
        aPath.lineJoinStyle = kCGLineCapRound;  //终点处理
        [aPath stroke];
    
    }


同样,用上述方法可以绘制圆,但是这个方法有弊端,会大量占用 cpu, 导致效率不佳,而我们可以用下面这个方法绘制出高性能的圆,主要是不占用系统 cpu, 那么我们在哪里绘制,其实是用 GPU处理,这样会大大提高运行速度,当然最主要的是不占用 cpu,至于为什么会这样?首先下面介绍的是用CAShapeLayer和贝塞尔曲线绘制.

CAShapeLayer和DrawRect的比较
DrawRect:DrawRect属于CoreGraphic框架,占用CPU,消耗性能大
CAShapeLayer:CAShapeLayer属于CoreAnimation框架,通过GPU来渲染图形,节省性能。动画渲染直接提交给手机GPU,不消耗内存

贝塞尔曲线与CAShapeLayer的关系
1,CAShapeLayer中shape代表形状的意思,所以需要形状才能生效
2,贝塞尔曲线可以创建基于矢量的路径
3,贝塞尔曲线给CAShapeLayer提供路径,CAShapeLayer在提供的路径中进行渲染。路径会闭环,所以绘制出了Shape
4,用于CAShapeLayer的贝塞尔曲线作为Path,其path是一个首尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线

用 CAShapeLayer 和 UIBeizierPath 绘制圆或者圆弧

-(void)drawCircleOnView
{
    //创建出CAShapeLayer
    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//设置shapeLayer的尺寸和位置
    self.shapeLayer.position = self.view.center;
    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor
    
    //设置线条的宽度和颜色
    self.shapeLayer.lineWidth = 1.0f;
    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
    //创建出圆形贝塞尔曲线
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    
    //让贝塞尔曲线与CAShapeLayer产生联系
    self.shapeLayer.path = circlePath.CGPath;
    
    //添加并显示
    [self.view.layer addSublayer:self.shapeLayer];
}

如果要做一个圆形进度条,那么我们需要对这两个参数进行设置

strokeEnd和strokeStart
Stroke:用笔画的意思
在这里就是起始笔和结束笔的位置
Stroke为1的话就是一整圈

然后将其加入到 NSTimer 中做一些相应的处理就可以实现动态绘制圆了,大家赶紧试试吧.


参考博客地址:http://blog.it985.com/7654.html




© 著作权归作者所有

GLAlanTong
粉丝 3
博文 21
码字总数 15640
作品 0
广州
程序员
私信 提问
iOS的绘图机制-iOS,iPad,iPhone,Objective-c

嘿!我又回来了。 在前面我介绍了iOS的视图机制,我也提到了iOS的视图框框可以通过drawRect自己绘图,我也说过每个view的layer(CALayer)就像一个视图的投影,其实我们也可以来操作它定制一...

晨曦之光
2012/05/28
2.9K
0
iO6 Programming pushing the limits 阅读笔记

目录 第一部分 iOS6新内容 第二部分 从每天工具中获取更多(介绍日常使用控件和框架的潜力) 第三部分 完成任务的正确工具(介绍不是那么常用的控件和框架) 第四部分 发挥到极限(深入理解i...

云飞扬v5
2015/11/09
56
0
40行代码在iPhone上动画显示路线图

![lines][1] 代码见 vgplay-ios 项目的 AnimatedLines.mm 或 AnimatedBezier.mm。 只是一个动画原型,还需要更多完善,使用还需要精简。目标使用还比较复杂,理想情况是写类似于脚本串指定速...

云贵高原
2014/07/04
268
0
Flutter 对 iOS、Android(双端开发者)的快速理解(一)

原文链接 更多教程 如果你有移动端开发经验,无论你是iOS还是Android开发者,你都可以利用现有的知识快速理解Flutter开发。 本文会通过对比双端开发和Flutter中的差异来说明。 Flutter中用 ...

TryEnough
01/29
0
0
GPU vs CPU in iOS

一直以来,我们做产品的时候并没有特别的去考虑CPU/GPU的使用,最近为了提升可视化功能的性能,发现合理使用GPU也是一个可以好好研究的部分,这里总结一下一些有用的信息。 中央处理器 CPU ...

雨_树
2018/07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Centos7 安装zabbix-agent

rpm -i https://repo.zabbix.com/zabbix/4.2/rhel/6/x86_64/zabbix-release-4.2-2.el6.noarch.rpm 可以到https://repo.zabbix.com/zabbix找到对应的版本 yum install zabbix-agent -y 出现E......

abowu
昨天
8
0
文本编辑器GNU nano 4.4 发布

GNU nano 4.4 "Hagelslag" 更新日志: 启动时,光标可以放在第一个或最后一个出现位置 字符串前面带有+/string 或 +?string的字符串。 发生自动硬包装时((--breaklonglines),任何前导引号...

linuxCool
昨天
7
0
你知道字节序吗

字节序 最近在调一个自定义报文的接口时,本来以为挺简单的,发现踩了好几个坑,其中一个比较“刻骨铭心”的问题就是数据的字节序问题。 背景 自定义报文,调用接口,服务端报文解析失败 iO...

杭城小刘
昨天
3
0
设计模式之依赖倒置原则

方法

东风破2019
昨天
6
0
关于如何通过模拟器完成模拟步数提升傻瓜式解决方案(囧)

因为对Android开发不太了解,也没去问朋友所以误打误撞找到的一个提升步数的解决方案,当然只是针对某安APP运动RUN的解决方式吧。 对Android不太了解,所以找了很多的解决方案来看看能不能破...

华山猛男
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部