一、基本图形绘制-画线

作者: CaesarsTesla | 来源:发表于2016-07-30 12:00 被阅读197次

    Quarz 2D是一个二维绘图引擎,用它能够:
    ➤绘制图形:线条、三角形、矩形、圆、弧等
    ➤绘制文字
    ➤绘制\生成图片(图像)
    ➤读取\生成PDF
    ➤截取\裁剪图片
    ➤自定义UI控件

    Quarz 2D实例:

    Quarz 2D能做很多强大的事情,比如
    ➤裁剪图片\圆形裁剪,
    ➤ 涂鸦画板,
    ➤ 以及手势解锁,
    ➤ 报表(折线图,饼状图,柱状图)

    自定义view

    在你的view上画东西,首先你要明白“图形上下文(Graphics Context)”的概念

    • 图形上下文(Graphics Context):你可以想象理解成画板,它是一个CGContextRef类型的数据,属于CoreGraphics(核心绘图)框架。
    • 图形上下文的作用:
      ➤保存绘图信息、绘图状态
      ➤决定绘制的输出目标(绘制到什么地方)(输出的目标可以是PDF文件,Bitmap或者显示器的窗口上)
    • 相同的一套绘图序列,指定不同的Graphics Context,就可以将相同的图像绘制到不同的目标

    ☐ Quarz 2D提供了以下几种类型的图形上下文:

    ➢Bitmap Graphics Context
    ➢ PDF Graphics Context
    ➢Window Graphics Context
    ➢Layer Graphics Context
    ➢Printer Graphics Context

    自定义view

    • 如何利用Quarz 2D绘制东西到view上?
      ➢首先得有图形上下文,因为它能保存绘图信息,并且决定着绘制到什么地方去
      ➢其次,哪个图形上下文必须跟view相关联,才嫩将内容绘制到view上面
    • 自定义View步骤:
      ➢新建一个类,继承自UIView
      ➢实现- (void)drawRect:(CGRect)rect方法,然后在这个方法中:
      • 取得跟当前view相关联的图形上下文
      • 绘制相应的图形内容---描述路径
      • 利用图形上下文绘制的所有内容渲染显示到view上

    新建一个MuView类,继承自UIView
    #import <UIKit/UIKit.h>
    @interface MuView : UIView
    @end
    在故事版中拖拽一个UIView,让其绑定MuView类型
    drawRect
    #import "MuView.h"
    @implementation MuView
    - (void)drawRect:(CGRect)rect{
    /*因为只有在drawRect这个方法里面才能获取到跟view的layer相关联的图形上下文
    *rect是当前控件的bounds
    *当这个view要显示的时候,才会调用drawRect绘制图形
    */
    [self ..];

    @end

    .

      -(void)drawLine{
        //    1获取图形上下文
        //     目前我们所用的上下文都是以UIGraphics开头的
        //    CGContextRef Ref饮用  CG:目前使用到的类型和函数 一般都是CG开头 CoreGraphics
        CGContextRef ctf = UIGraphicsGetCurrentContext();
    
        //    2描述路径
        //    创建路径
        CGMutablePathRef path = CGPathCreateMutable();
        //设置起点
        //path:给哪个路径设置起点 CGAffineTransform:形变 x、y代表起点
        CGPathMoveToPoint( path, NULL, 50, 50);
    
        //添加一根线到某个点
        CGPathAddLineToPoint(path, NULL, 200, 200);
    
        //    3把路径添加到上下文
        CGContextAddPath(ctf, path);
        //    4渲染上下文
        CGContextStrokePath(ctf);
    
    
    }
    

    .

    - (void)drawLine1{
        //    获取上下文
        CGContextRef ref = UIGraphicsGetCurrentContext();
        //    描述路径
        //    设置起点 在这底层会帮我们创建一个path
        CGContextMoveToPoint(ref, 150, 150);
        CGContextAddLineToPoint(ref, 50, 50);
    
        //    渲染上下文
        CGContextStrokePath(ref);
    }
    

    .

    -(void)drawLine2{
     //UIKIT已经帮我们封装了一些绘图的功能
    UIBezierPath *path = [UIBezierPath bezierPath];
    //    设置起点
    [path moveToPoint:CGPointMake(50, 50)];
    //    添加一根线到某个点
    [path addLineToPoint:CGPointMake(100, 100)];
    //    绘制路径
    [path stroke];
    }

    相关文章

      网友评论

        本文标题:一、基本图形绘制-画线

        本文链接:https://www.haomeiwen.com/subject/dnftsttx.html