| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
y37f
10年前发布

Quartz2D的基本用法

Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统。Quartz2D的基本用法。

1、自定义view的步骤

  • 新建一个类,继承自UIView

  • 实现- (void)drawRect:(CGRect)rect方法,然后在这个方法中

  • 取得跟当前view相关联的图形上下文

  • 绘制相应的图形内容

  • 利用图形上下文将绘制的所有内容渲染显示到view上面


2、Quartz2D绘图的代码步骤

  • 获得图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

  • 拼接路径(下面代码是搞一条线段)
    CGContextMoveToPoint(ctx, 10, 10);
    CGContextAddLineToPoint(ctx, 100, 100);

  • 绘制路径
    CGContextStrokePath(ctx); // CGContextFillPath(ctx);


3、常用拼接路径函数

  • 新建一个起点
    void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y);

  • 添加新的线段到某个点
    void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y);

  • 添加一个矩形
    void CGContextAddRect(CGContextRef c, CGRect rect);

  • 添加一个椭圆
    void CGContextAddEllipseInRect(CGContextRef context, CGRect rect);

  • 添加一个圆弧
    void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle,                                         CGFloat endAngle, int clockwise);


4、常用绘制路径函数

  • Mode参数决定绘制的模式
    void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)

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

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

    提示:一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数,都是用来绘制路径的


5、图形上下文栈的操作

  • 将当前的上下文copy一份,保存到栈顶(那个栈叫做”图形上下文栈”)
    void CGContextSaveGState(CGContextRef c)

  • 将栈顶的上下文出栈,替换掉当前的上下文
    void CGContextRestoreGState(CGContextRef c)


6、代码实例

- (void)drawRect:(CGRect)rect  {      // Drawing code      // 1.获得图形上下文      CGContextRef ctxR = UIGraphicsGetCurrentContext();             // 2.拼接图形(路径)      // 设置线段宽度      CGContextSetLineWidth(ctxR, 10);             // 设置线段头尾部的样式      /**          kCGLineCapButt,          kCGLineCapRound,    //圆角          kCGLineCapSquare      */      CGContextSetLineCap(ctxR, kCGLineCapRound);             // 设置线段转折点的样式      /**          kCGLineJoinMiter,          kCGLineJoinRound,    //圆角          kCGLineJoinBevel      */      CGContextSetLineJoin(ctxR, kCGLineJoinRound);             /**  第1根线段  **/      // 设置颜色      CGContextSetRGBStrokeColor(ctxR, 1, 0, 0, 1);      // 设置一个起点      CGContextMoveToPoint(ctxR, 10, 10);      // 添加一条线段到(100, 100)      CGContextAddLineToPoint(ctxR, 100, 100);             // 渲染一次      CGContextStrokePath(ctxR);                    /**  第2根线段  **/      // 设置颜色      CGContextSetRGBStrokeColor(ctxR, 0, 0, 1, 1);      // 设置一个起点      CGContextMoveToPoint(ctxR, 200, 190);      // 添加一条线段到(150, 40)      CGContextAddLineToPoint(ctxR, 150, 40);      CGContextAddLineToPoint(ctxR, 120, 60);                    // 3.渲染显示到view上面      CGContextStrokePath(ctxR);  }

- (void)drawRect:(CGRect)rect  {      drawForRect();  }     /**   *  画四边形   */  void drawForRect()  {      // 1.获得上下文      CGContextRef ctxR = UIGraphicsGetCurrentContext();             // 2.画矩形      CGContextAddRect(ctxR, CGRectMake(10, 10, 150, 100));             // set : 同时设置为实心和空心颜色      // setStroke : 设置空心颜色      // setFill : 设置实心颜色      [[UIColor whiteColor] set];         //    CGContextSetRGBFillColor(ctxR, 0, 0, 1, 1);             // 3.绘制图形      CGContextFillPath(ctxR);  }     /**   *  画三角形   */  void drawTriangle()  {      // 1.获得上下文      CGContextRef ctxR = UIGraphicsGetCurrentContext();             // 2.画三角形      CGContextMoveToPoint(ctxR, 0, 0);      CGContextAddLineToPoint(ctxR, 100, 100);      CGContextAddLineToPoint(ctxR, 150, 80);      // 关闭路径(连接起点和最后一个点)      CGContextClosePath(ctxR);             //      CGContextSetRGBStrokeColor(ctxR, 0, 1, 0, 1);             // 3.绘制图形      CGContextStrokePath(ctxR);  }

- (void)drawRect:(CGRect)rect  {      // 1.获得上下文      CGContextRef ctxR = UIGraphicsGetCurrentContext();             // 2.画1/4圆      CGContextMoveToPoint(ctxR, 100, 100);      CGContextAddLineToPoint(ctxR, 100, 150);      CGContextAddArc(ctxR, 100, 100, 50, -M_PI_2, M_PI, 1);      CGContextClosePath(ctxR);             [[UIColor redColor] set];             // 3.显示所绘制的东西      CGContextFillPath(ctxR);  }     /**   *  画圆弧   */  void drawArc()  {      // 1.获得上下文      CGContextRef ctxR = UIGraphicsGetCurrentContext();             // 2.画圆弧      // x\y : 圆心      // radius : 半径      // startAngle : 开始角度      // endAngle : 结束角度      // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)      CGContextAddArc(ctxR, 100, 100, 50, M_PI_2, M_PI, 0);                    // 3.显示所绘制的东西      CGContextFillPath(ctxR);  }     /**   *  画圆   */  void drawCircle()  {      // 1.获得上下文      CGContextRef ctxR = UIGraphicsGetCurrentContext();             // 2.画圆      CGContextAddEllipseInRect(ctxR, CGRectMake(50, 10, 100, 100));             CGContextSetLineWidth(ctxR, 10);             // 3.显示所绘制的东西      CGContextStrokePath(ctxR);  }

- (void)drawRect:(CGRect)rect  {      drawImage();  }     void drawImage()  {      // 1.取得图片      UIImage *image = [UIImage imageNamed:@"me"];             // 2.画  //    [image drawAtPoint:CGPointMake(50, 50)];  //    [image drawInRect:CGRectMake(0, 0, 150, 150)];      [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];             // 3.画文字      NSString *str = @"为xxx所画";      [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];  }     /**   *  画文字   */  void drawText()  {      // 1.获得上下文      CGContextRef ctxR = UIGraphicsGetCurrentContext();      // 2.画矩形      CGRect cubeRect = CGRectMake(50, 50, 100, 100);      CGContextAddRect(ctxR, cubeRect);      // 3.显示所绘制的东西      CGContextFillPath(ctxR);                           // 4.画文字      NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";      //    [str drawAtPoint:CGPointZero withAttributes:nil];             NSMutableDictionary *attrs = [NSMutableDictionary dictionary];      // NSForegroundColorAttributeName : 文字颜色      // NSFontAttributeName : 字体      attrs[NSForegroundColorAttributeName] = [UIColor redColor];      attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];      [str drawInRect:cubeRect withAttributes:attrs];  }