码迷,mamicode.com
首页 > 其他好文 > 详细

第三十四篇:Quartz2D绘图

时间:2015-10-27 17:43:46      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:ios   objective-c   uiview   quartz   2d   

1.Quartz2D在iOS开发中的价值

?自定义view(自定义UI控件)

2.图形上下文

1)图形上下文(Graphics Context):是一个CGContextRef类型的数据
2)图形上下文的作用
?保存绘图信息、绘图状态
?决定绘制的输出目标(绘制到什么地方去?)

(输出目标可以是PDF文件、Bitmap或者显示器的窗口上)

技术分享

3)相同的一套绘图序列,指定不同的GraphicsContext,就可将相同的图像绘制到不同的目标上
4)Quartz2D提供了以下几种类型的Graphics Context:

?BitmapGraphics Context
?PDFGraphics Context
?WindowGraphics Context
?LayerGraphics Context
?PrinterGraphics Context
技术分享

3.自定义view

1)如何利用Quartz2D绘制东西到view上?
?首先,得有图形上下文,因为它能保存绘图信息,并且决定着绘制到什么地方去
?其次,那个图形上下文必须跟view相关联,才能将内容绘制到view上面

2)自定义view的步骤
?新建一个类,继承自UIView
?实现- (void)drawRect:(CGRect)rect方法,然后在这个方法中
>取得跟当前view相关联的图形上下文
>绘制相应的图形内容
>利用图形上下文将绘制的所有内容渲染显示到view上面

3)

》为什么要实现drawRect:方法才能绘图到view上?
?因为在drawRect:方法中才能取得跟view相关联的图形上下文
》drawRect:方法在什么时候被调用?
?当view第一次显示到屏幕上时(被加到UIWindow上显示出来)
?调用view的setNeedsDisplay或者setNeedsDisplayInRect:时

4)drawRect:中取得的上下文
》在drawRect:方法中取得上下文后,就可以绘制东西到view上
》View内部有个layer(图层)属性,drawRect:方法中取得的是一个Layer Graphics Context,因此,绘制的东西其实是绘制到view的layer上去了
》View之所以能显示东西,完全是因为它内部的layer

4.Quartz2D绘图的代码步骤
1)获得图形上下文

CGContextRef ctx= UIGraphicsGetCurrentContext();

2)拼接路径(下面代码是搞一条线段)

CGContextMoveToPoint(ctx,10, 10);

CGContextAddLineToPoint(ctx,100, 100);

3)绘制路径

CGContextStrokePath(ctx); //CGContextFillPath(ctx);


5.绘图的一些方法


获得图形上下文:
UIGraphicsGetCurrentContext()

Paths

指定一个点成为current point,Quartz会跟踪current point一般执行完一个相关函数后,current point都会相应的改变.

void CGContextMoveToPoint (CGContextRef c, CGFloat x,CGFloat y );

创建一条直线,从current point到 (x,y),然后current point会变成(x,y)

void CGContextAddLineToPoint (
    CGContextRef c,
    CGFloat x,
    CGFloat y
 );


创建多条直线,比如points有两个点,那么会画两条直线 从current point到 (x1,y1), 然后是(x1,y1)到(x2,y2),然后current point会变成points中的最后一个点

 void CGContextAddLines (
    CGContextRef c,
    const CGPoint points[],
    size_t count
 );


形成封闭图形

CGContextClosePath(CGContextRef  _Nullable c)

设置线宽状态:

CGContextSetLineWidth(CGContextRef  _Nullable c, CGFloat width);

设置线两端的形状

CGContextSetLineCap(CGContextRef  _Nullable c, CGLineCap cap)

设置填充的颜色

CGContextSetRGBFillColor(CGContextRef  _Nullable c, CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha)
CGContextSetRGBStrokeColor(CGContextRef  _Nullable c, CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha)

裁剪图形

CGContextClip(CGContextRef  _Nullable c)
CGContextClipToMask(CGContextRef  _Nullable c, CGRect rect, CGImageRef  _Nullable mask)
CGContextClipToRect(CGContextRef  _Nullable c, CGRect rect)
CGContextClipToRects(CGContextRef  _Nullable c, const CGRect * _Nonnull rects, size_t count)

画一个椭圆

CGContextAddEllipseInRect(CGContextRef  _Nullable c, CGRect rect)

画出一个距形

CGContextAddRect(CGContextRef  _Nullable c, CGRect rect)
CGContextAddRects(CGContextRef  _Nullable c, const CGRect * _Nullable rects, size_t count)

弧:Arcs

 两种方法创建弧度 第一种

 

void CGContextAddArc (
    CGContextRef c,    
    CGFloat x,             //圆心的x坐标
    CGFloat y,    //圆心的x坐标
    CGFloat radius,   //圆的半径 
    CGFloat startAngle,    //开始弧度
    CGFloat endAngle,   //结束弧度
    int clockwise          //0表示顺时针,1表示逆时针
 );

 假如想创建一个完整的圆圈,那么 开始弧度就是0 结束弧度是 2pi, 因为圆周长是 2*pi*r.

 最后,函数执行完后,current point就被重置为(x,y).

 还有一点要注意的是,假如当前path已经存在一个subpath,那么这个函数执行的另外一个效果是

 会有一条直线,从current point到弧的起点


 第二种

 void CGContextAddArcToPoint (
    CGContextRef c,
    CGFloat x1,  //端点1的x坐标
    CGFloat y1,  //端点1的y坐标
    CGFloat x2,  //端点2的x坐标
    CGFloat y2,  //端点2的y坐标
    CGFloat radius //半径
 );

 原理:首先画两条线,这两条线分别是 current point to (x1,y1) 和(x1,y1) to (x2,y2).

 这样就是出现一个以(x1,y1)为顶点的两条射线,

 然后定义半径长度,这个半径是垂直于两条射线的,这样就能决定一个圆了,更好的理解看下图,不过个人认为下图所标的 tangent point 1的位置是错误的。

 最后,函数执行完后,current point就被重置为(x2,y2).

 还有一点要注意的是,假如当前path已经存在一个subpath,那么这个函数执行的另外一个效果是

 会有一条直线,从current point到(x1,y1)


常用绘制路径函数
//Mode参数决定绘制的模式
void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)

//绘制空心路径
void CGContextStrokePath(CGContextRef c)

//绘制实心路径
void CGContextFillPath(CGContextRef c)














绘制好的图形

绘制好的图形

绘制好的图

版权声明:本文为博主原创文章,未经博主允许不得转载。

第三十四篇:Quartz2D绘图

标签:ios   objective-c   uiview   quartz   2d   

原文地址:http://blog.csdn.net/u010372095/article/details/49447663

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!