• ios学习_Quartz2D学习笔记


     

    Quartz2D作用 : 绘制图案、绘制文字、绘制图片、自定义控件,其实大部分UI控件的内容是通过Qurtz2D画出来的

    Quartz2D是来自Core Graphics是一个二维绘图引擎,同时支持ios和Mac系统

    利用Quartz2D绘制东西到View上的步骤 : 

    1.  自定义一类,继承自UIView

    2.  实现drawRect方法

      2.1 取得当前View的相关联的图像上下文: CGContextRef ctx = UIGraphicsGetCurrentContext();

      2.2 绘制相应的图形内容

      2.3 利用图形上下文将绘制的所有内容渲染到View上面:CGContextFillPath(ctx)或CGContextStrokePath(ctx);

     

    常见Quartz2D方法 :

      CGContextRef ctx = UIGraphicsGetCurrentContext();//获得上下文,返回的是同一个

      CGContextMoveToPoint(ctx, 0, 0);//设置起点也可以是重新设置起点

      CGContextAddLineToPoint(ctx, 100, 100);//添加一天线段

      CGContextAddLineToPoint(ctx, 200, 300);//不要再设置起点

      CGContextClosePath(ctx);//关闭路径,也就是连接起点和终点

      CGContextAddRect(ctx, CGRectMake(0, 0, 100, 100));//画矩形

      CGContextAddRect(ctx, CGRectMake(0, 0, 100, 100));//画矩形

      CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 50));//画椭圆

       CGContextAddArc(ctx, 50, 50, 40, 0, M_PI, 1);//radius :半径    startAngle 开始角度    clockwise  :0是顺时针 1是逆时针

      CGContextSetLineWidth(ctx, 5);//设置线宽

      CGContextSetRGBFillColor(ctx, 0, 0, 0, 1);//设置RGB实心颜色

      CGContextSetRGBStrokeColor(ctx, 0, 0, 0, 1);//设置RGB空心颜色

      CGContextSetLineCap(ctx, kCGLineCapRound);//设置头是圆的

      CGContextSetLineJoin(ctx, kCGLineJoinRound);//设置转折点

      [[UIColor whiteColor] set];//可以设置颜色,实心和空心都可以

        [str drawAtPoint:CGPointZero withAttributes:nil];//画文字

        [image drawInRect:CGRectMake(0, 0, 150, 150)];//画图片

        [image drawAsPatternInRect:CGRectMake(0, 0, 150, 150)];//平铺效果

       

      CGContextFillPath(ctx);//渲染,实心

      CGContextStrokePath(ctx);//渲染,空心

    图形上下文栈 (使用这个可以):

        CGContextSaveGState(ctx);//将ctx拷贝一次放到栈中

      CGContextRestoreGState(ctx);//将栈顶得上下文出栈,替换当前的上下文

    quartz2D应用场景 :

     1. 打水印(两张合成一张) 例子:

         UIImage *backgroundImage = [UIImage imageNamed:@" backgroundImage "];//加载图片,为了设置之后上下文的宽度

        UIGraphicsBeginImageContextWithOptions(backgroundImage.size, NO, 0.0);//根据背景图片创建一个基于位图的上下文

        [oldImage drawInRect:CGRectMake(0, 0, backgroundImage.size.width, backgroundImage.size.height)];//把图片画上去

      UIImage *logo = [UIImage imageNamed:@"logo"];//添加水印图片

      CGRect logoRect;//设置logo的位置

        [logo drawInRect:logoRect];//把水印画到上下文上去

        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();//生成合成的图片

        UIGraphicsEndImageContext();//结束上下文

    2.图片裁剪

        UIImage *image = [UIImage imageNamed:@" image "];

        CGFloat borderW = 2;//设置外面环的大小

        CGFloat contextW = image.size.width + borderW * 2;

        CGFloat contextH = image.size.height + borderW * 2;

        UIGraphicsBeginImageContextWithOptions(CGSizeMake(contextW,    contextH), NO, 0.0);//

        CGContextRef ctx = UIGraphicsGetCurrentContext();//取得当前的上下文,

        CGFloat centerX = imageW * 0.5;

        CGFloat centerY = imageH * 0.5;

        CGContextAddArc(ctx, centerX, centerY, centerX, 0, M_PI * 2, 0);//画圆

        [[UIColor whiteColor] set];

        CGContextFillPath(ctx);

        CGFloat radius = oldImage.size.width * 0.5;

        CGContextAddArc(ctx, centerX, centerY, radius, 0, M_PI * 2, 0);

        CGContextClip(ctx);//裁剪,裁剪只是对后面有影响

        [image drawInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];

        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

    3.截屏

      UIGraphicsBeginImageContextWithOptions(self.view.frame.size, NO, 0.0);//根据View的大小开启上下文

      [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];//把View的图层画到上下文中

      UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();//根据上下文生成图片

      UIGraphicsEndImageContext();//结束上下文

    总结一下 : 

    (1)都要创建一个图形上下文,并都是基于位图 UIGraphicsBeginImageContextWithOptions

    (2) 取得当前的上下文在上面实现绘制  CGContextRef ctx = UIGraphicsGetCurrentContext();

    (2)使用完图形上下文之后都要关闭    UIGraphicsEndImageContext();

    *保存图片到沙盒的代码 :        

            NSString * path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask,    YES)lastObject]stringByAppendingString:@"name.png"];

            NSData *data = UIImagePNGRepresentation(newImage);

            [data writeToFile:path atomically:YES];

     

    相关知识点和注意点 :

    (1)   画文字和图片的时候不要上下文(利用oc来画是不需要上下文的)

    (2)  如果想画多种颜色,就要画完一次就要渲染一次,也可以使用图形上下文栈

    (3)   drawRect方法不能手动调用,但是可以手动调用setNeedsDisplay,会把上一次的清掉

    (4)   awakeFormNib当一个控件从xib中创建的时候就会调用

    (5)   自定义一个控件的时候,如果控件里面有一个属性的时候,一定要重写setter方法

    (6)   图层是不能用drawRect方法的,但是可以用renderInContext

    (7)   当点击按钮截屏的时候,应该让截屏操作延时(延时函数在GCD笔记中有介绍),因为一点击的时候按钮会变灰。

    (8)   如果要绘图到View上,就只能在drawRect中绘制,因为在drawRect方法中才能取到View的图形上下文

    (9)   View之所以能显示东西,是因为为它内部的layer

  • 相关阅读:
    Android 目前最稳定和高效的UI适配方案
    寄Android开发Gradle你需要知道的知识
    Android精讲--界面编程5(AdapterView及其子类)
    Android精讲--界面编程4(ImageView及其子类)
    Android精讲--界面编程3(TextView及其子类)
    Android精讲--界面编程2(布局管理器)
    Android的基类Context和View
    Android里的前端界面
    Android的活动Activity
    Android基础入门
  • 原文地址:https://www.cnblogs.com/TangKaiFu/p/4451027.html
Copyright © 2020-2023  润新知