UIView绘图

作者: 一个人在路上走下去 | 来源:发表于2016-06-09 22:17 被阅读1052次

    在Mac OS X中兼容很多种绘图技术,例如Quartz, OpenGL, Core Image, Core Video, Quartz Composer, PDF Kit, and QuickTime,iphone中主要通过OpenGL, Quartz, UIKit, or Core Animation来绘图。Quartz会自动开启图形加速,是当前应用最广泛的绘图技术。Application Kit framework (AppKit.framework)框架中包含了从原始图形,到复杂图形的一系列的类和方法,而它就是基于Quartz的。

    Quartz有时候也认为是CoreGraphics。共有两种部分组成,Quartz Compositor(合成视窗系统,管理和合成幕后视窗影像来建立Mac OS X使用者接口)和Quartz 2D(是iOS和Mac OS X环境下的二维绘图引擎)。Quartz采用的是Painter’s Model,就是说图画会一层一层的覆盖上去,后面画上去的会修改或者覆盖前面已经画好的。UIKit 是非线程安全的,所以最好把所有的绘图都放在主线程上执行。不管使用的哪个技术来绘图,所有的绘图都是在 UIView object 中进行, view决定绘图在那里进行。

    view绘图介绍

    绘图环境包含了两个东西,一是画布,决定了你在什么地方进行绘画;二是图形设置,决定颜色,大小,质量和方向。图形上下文(Graphics Context) 就是画图的目的,大多图形上下文都在主线程上,当然为了更好的完成画图,也可以在辅助线程上。大多数情况下,cocoa都会在你绘图前为你创建好和配置好图形上下文。图形上下文封装了所有的在画布上的绘图信息,包括当前绘画属性。Graphics Context大多用在window和在window上面的view, 每一个window或者view都有一个图形上下文。

    当一个view需要更新某一部分内容的时候,view会请求 drawRect: 方法,在view第一次请求drawRect方法的时候,传递的rectangle 参数一般是view的整个rectangle ,后续更新的时候,传递的一般是需要更新的那部分rectangle 。当请求了一个 drawRect:方法,view会标志自己已经被更新了,然后等待下一个更新请求的到达。

    当请求drawRect:方法 ,view object会自动配置图形环境,作为环境的一部分,UIView会创建一个图形上下文,图形上下文定义基本图形属性,如颜色,剪切区域,线的宽度和样式信息,字体信息,合成选项等。也可以自己创建图形上下文用 CGBitmapContextCreate 或者CGPDFContextCreate 函数。需要注意的是,自己创建的图形上下文的原点是在左下角。

    下面几种情况下,view会重新绘图:
    1.移动或者移除另外一个view
    2.设置view的hidden 属性为NO, view重新出现
    3.滚动view,当滚出或者滚进来的时候
    4.明确的请求setNeedsDisplay和setNeedsDisplayInRect:方法

    绘图使用

    - (void)drawRect:(CGRect)rect
    {
    CGContextRef context = UIGraphicsGetCurrentContext(); // 获得图形上下文
    
    // 构建描绘路径
    CGContextMoveToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 100, 200);
    CGContextAddLineToPoint(context, 240, 220);
    
    //闭合描绘路径
    CGContextClosePath(context);
    
    [[UIColor blackColor] setStroke]; // 为闭合路径描边
    [[UIColor redColor] setFill];// 设置要填充颜色
    
    CGContextDrawPath(context, kCGPathFillStroke);// 设置描绘路径方式
    }
    

    路径用于描述由一序列线和Bézier曲线构成的2D几何形状。 Bézier曲线是法国数学家“贝塞尔”在工作中发现,任何一条曲线都可以通过与它相切的控制线两端的点的位置来定义。Core Graphics中也有一些用于创建简单路径(比如矩形和椭圆形)的便利函数。对于更为复杂的路径,必须用Core Graphics框架提供的函数自行创建。

    CGContextAddCurveToPoint(cgContext, 333, 0, 332, 26, 330, 26); // Bézier曲线
    

    结果如下:

    Quartz技术最开始为Mac OS X系统设计的图形技术,它的坐标原点位于左下角。UIKit坐标与Quartz不同,原点位于左上角。Quartz 2D和UIKit的坐标系是在Y轴方向上的镜像。

    UIImage *img = [UIImage imageNamed:@"catjump_015"];
    
    [img drawAsPatternInRect:CGRectMake(0, 0, img.size.width, img.size.height)]; // 此时画出来的图片是正的。
    

    - (void)drawRect:(CGRect)rect {
    
    UIImage *img = [UIImage imageNamed:@"catjump_015"];
    
    CGImageRef image = img.CGImage;
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context); // 将当前图形状态要入到图形堆栈
    
    CGContextRotateCTM(context, radians(180.)); //顺时针旋转180度
    CGContextScaleCTM(context, -1, 1); // 水平旋转
    CGContextTranslateCTM(context, 0, -img.size.height); //调整位置偏移
    
    
    CGRect touchRect = CGRectMake(0, 0, img.size.width, img.size.height);
    CGContextDrawImage(context, touchRect, image); // 在上下文中绘制图形
    CGContextRestoreGState(context); // 回复当前图形状态
    
    
    }
    
    图解

    相关文章

      网友评论

      本文标题:UIView绘图

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