Quartz 2D绘图

作者: hunterzhu | 来源:发表于2016-08-09 20:21 被阅读95次

·Quartz2D的介绍
·图形上下文的概念
·几种图形的绘制
概念的东西我就不多说了,主要是绘图。
1.简介:
·Quartz 2D就是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境
2.图形上下文
创建图形上下文:Graphics context是一个数据类型,封装了Quartz绘制图像到输出设备信息。
一个Graphics context表示一个绘制目标。它包含绘制系统用于完成绘制指令的绘制参数和设备相关信息。
Graphics context定义了基本的绘制属性,如颜色,裁剪区域,线条宽度,样式信息,字体信息,混合模式等。
Graphics context是一种数据形式 CGContextRef.
必须包含的代码:

CGContextRef context = UIGraphicsGetCurrentContext();

3.图形绘制
(1)多条线的路径。

- (void)pointInView:(CGContextRef )context{
    
    //Quartz的基本绘图方法---构建路径
    //1.开始构建一个路径
    CGContextBeginPath(context);
    //2.设置路径的起点
    CGContextMoveToPoint(context, 0, 0);
    //3.指定点添加线
    CGContextAddLineToPoint(context, 50, 50);
    CGContextAddLineToPoint(context, 50, 200);
    CGContextAddLineToPoint(context, 0, 0);
    //5.关闭路径
    CGContextClosePath(context);
    
    //7.设置颜色
    [[UIColor redColor] setStroke];
    [[UIColor greenColor] setFill];
    //6.绘制路径
    CGContextDrawPath(context, kCGPathFillStroke);
    CGContextFillPath(context);
}
1.png

(2)多个点组成的路径

- (void)pointInView:(CGContextRef )context{
    
    //Quartz的基本绘图方法---构建路径
    //1.开始构建一个路径
    CGContextBeginPath(context);
    //2.设置路径的起点
    CGContextMoveToPoint(context, 0, 0);
    //3.指定点添加线
    CGContextAddLineToPoint(context, 50, 50);
    CGContextAddLineToPoint(context, 50, 200);
    CGContextAddLineToPoint(context, 0, 0);
    //5.关闭路径
    CGContextClosePath(context);
    
    //7.设置颜色
    [[UIColor redColor] setStroke];
    [[UIColor greenColor] setFill];
    //6.绘制路径
    CGContextDrawPath(context, kCGPathFillStroke);
    CGContextFillPath(context);
}
![Uploading 屏幕快照 2016-08-09 下午8.15.33_104550.png . . .]

(3)画出一个矩形

- (void)rectangleInView:(CGContextRef)context{
    //矩形的frame
    CGRect rect = CGRectMake(50, 50, 100, 200);
    //实心矩形
//    UIRectFill(rect);
    //空心矩形
    UIRectFrame(rect);
}

![屏幕快照 2016-08-09 下午8.15.33.png](https://img.haomeiwen.com/i2464204/a7353a2a5b13da35.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



![屏幕快照 2016-08-09 下午8.15.33.png](https://img.haomeiwen.com/i2464204/e9136c2f8dfcf2fd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

(4)绘制圆弧

- (void)arcInView:(CGContextRef)context{
    
    //绘制圆弧
    /**
     *
     *
     *  @param context      上下文
     *  @param x#>          圆的中心点坐标x description#>
     *  @param y#>          圆的中心点坐标y description#>
     *  @param radius#>     圆的半径 description#>
     *  @param startAngle#> 开始的角度 description#>
     *  @param endAngle#>   结束的角度 description#>
     *  @param clockwise#>  画的方向 0 顺时针  1 逆时针
     *
     *  @return <#return value description#>
     */
    CGContextAddArc(context, 150, 200, 50, 0, 180, 1);
    //边框颜色
    [[UIColor orangeColor]setStroke];
    //填充颜色
    [[UIColor yellowColor]setFill];
    //绘图
    CGContextDrawPath(context, kCGPathStroke);
}
屏幕快照 2016-08-09 下午7.32.34.png

(5)画出内切园

- (void)incircle:(CGContextRef)context{
    CGRect rect = CGRectMake(100, 100, 100, 100);
    UIRectFrame(rect);
    [[UIColor blueColor] setStroke];
    //内切圆设置
    CGContextAddEllipseInRect(context, rect);
    CGContextDrawPath(context, kCGPathStroke);   
}
屏幕快照 2016-08-09 下午8.16.42.png

(6)贝塞尔曲线

- (void)cueInView:(CGContextRef)context{
    
    //1.设置起始点
    CGContextMoveToPoint(context, 50, 200);
    //2.设置多个点
    /*
     CGContextRef  _Nullable c:上下文
     cp1x cp1y: 第一条切线的终点
     cp2x cp2y: 第二条切线的起点
     x  y: 第二条切线的终点
     */
    CGContextAddCurveToPoint(context, 150, 100, 250, 300, 350, 200);
    CGContextDrawPath(context, kCGPathStroke);
    
}
屏幕快照 2016-08-09 下午7.49.59.png

(7)绘制文字

- (void)textInView:(CGContextRef)context{
    NSString *str = @"呵呵 hehe 呵呵";
    CGRect rect = CGRectMake(50, 50, 200, 20);
    //设置文字的属性字典
    NSDictionary *dic = @{
                          NSFontAttributeName:[UIFont systemFontOfSize:20],
                          NSBackgroundColorAttributeName:[UIColor grayColor],
                          NSForegroundColorAttributeName:[UIColor yellowColor]
                          };
    //绘制
    [str drawInRect:rect withAttributes:dic];   
}
![Uploading 屏幕快照 2016-08-09 下午7.57.29_240671.png . . .]

相关文章

  • Quartz 2D

    Quartz 2D简介 Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成...

  • Quartz 2D绘图(CoreGraphics)

    Quartz 2D绘图(CoreGraphics) 1. Quartz概述 Quartz是Mac OS X的Dar...

  • Quartz 2D 绘图技术

    Quartz 2D。是 iOS 和 Mac OS X 环境下的2D绘图引擎。Quartz 2D 也被称为 Core...

  • Quartz 2D绘图 (1)初识

    Quartz 2D介绍 什么是Quartz2D ?Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统...

  • Quartz2D简单介绍

    一、什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能...

  • Quartz2D?

    什么是Quartz2D? Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完...

  • iOS学习笔记(6):Quartz2D

    什么是Quartz2D Quartz 2D 是一个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D的作...

  • Quartz2D

    什么是Quartz2D? Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完...

  • 【Quartz2D】绘图引擎

    什么是Quartz2D Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统Quartz 2D能完成的...

  • iOS_使用Quartz2D引擎进行基本绘图

    gitHub传送门,点我哦!在iOS中常用的绘图框架就是Quartz 2D,Quartz 2D是Core Grap...

网友评论

    本文标题:Quartz 2D绘图

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