iOS开发中Quartz2D的基本使用方式举例

一、画直线

代码:

代码如下:

//
//  YYlineview.m
//  03-画直线
//
//  Created by apple on 14-6-9.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYlineview.h"

@implementation YYlineview

// 当自定义view第一次显示出来的时候就会调用drawRect方法
- (void)drawRect:(CGRect)rect
{

// 1.取得和当前视图相关联的图形上下文(因为图形上下文决定绘制的输出目标)/
    // 如果是在drawRect方法中调用UIGraphicsGetCurrentContext方法获取出来的就是Layer的上下文
    CGContextRef  ctx=UIGraphicsGetCurrentContext();//不需要*,同id
   
    // 2.绘图(绘制直线), 保存绘图信息
    // 设置起点
    CGContextMoveToPoint(ctx, 20, 100);
    //设置终点
    CGContextAddLineToPoint(ctx, 300, 100);
   
   
    //设置绘图的状态
    //设置线条的颜色为蓝色
    CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0);
    //设置线条的宽度
    CGContextSetLineWidth(ctx, 15);
    //设置线条起点和终点的样式为圆角
    CGContextSetLineCap(ctx, kCGLineCapRound);
    //设置线条的转角的样式为圆角
    CGContextSetLineJoin(ctx, kCGLineJoinRound);
    //3.渲染(绘制出一条空心的线)
    CGContextStrokePath(ctx);
   
//    //注意线条不能渲染为实心的
//    CGContextFillPath(ctx);
   
   
   
    //设置第二条线
    //设置第二条线的起点
    CGContextMoveToPoint(ctx, 50, 200);
    //设置第二天线的终点(自动把上一条直线的终点当做起点)
    CGContextAddLineToPoint(ctx, 300, 60);
   
    //设置绘图的状态
//    CGContextSetRGBStrokeColor(ctx, 1.0, 0.7, 0.3, 1.0);
    //第二种设置颜色的方式
    [[UIColor grayColor] set];
    //设置线条的宽度
    CGContextSetLineWidth(ctx, 10);
    //设置线条的起点和终点的样式
    CGContextSetLineCap(ctx, kCGLineCapButt);
   
    //渲染第二条线的图形到view上
    //绘制一条空心的线
    CGContextStrokePath(ctx);
}

@end

效果:

二、画三角形

代码:

代码如下:

//
//  YYrectview.m
//  02-画三角形
//
//  Created by 孔医己 on 14-6-10.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYrectview.h"

@implementation YYrectview

- (void)drawRect:(CGRect)rect
{
    //1.获得图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
   
    //2.绘制三角形
    //设置起点
    CGContextMoveToPoint(ctx, 20, 100);
    //设置第二个点
    CGContextAddLineToPoint(ctx, 40, 300);
    //设置第三个点
    CGContextAddLineToPoint(ctx, 200, 200);
    //设置终点
//     CGContextAddLineToPoint(ctx, 20, 100);
    //关闭起点和终点
    CGContextClosePath(ctx);
   
    // 3.渲染图形到layer上
    CGContextStrokePath(ctx);
   
}

@end

效果:

提示:关闭起点和终点  CGContextClosePath(ctx);

三、画四边形

代码:

代码如下:

//
//  YYrect.m
//  03-画四边形
//
//  Created by 孔医己 on 14-6-10.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYrect.h"

@implementation YYrect

- (void)drawRect:(CGRect)rect
{

//1.获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //2.画四边形
    CGContextAddRect(ctx, CGRectMake(20, 20, 150, 100));
   
    // 如果要设置绘图的状态必须在渲染之前
    //    CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1.0);
    // 绘制什么类型的图形(空心或者实心).就要通过什么类型的方法设置状态
    //    CGContextSetRGBFillColor(ctx, 1.0, 0, 0, 1.0);
   
    // 调用OC的方法设置绘图的颜色
    //    [[UIColor purpleColor] setFill];
    //    [[UIColor blueColor] setStroke];
    // 调用OC的方法设置绘图颜色(同时设置了实心和空心)
    //    [[UIColor greenColor] set];
    [[UIColor colorWithRed:1.0 green:0 blue:0 alpha:1.0] set];
   
   
    //3.渲染图形到layer上
    //空心的
    CGContextStrokePath(ctx);
    //实心的
//    CGContextFillPath(ctx);
   
}

@end

提示:如果要设置绘图的状态必须在渲染之前。

效果(实心和空心):

四、画圆

代码1:

代码如下:

- (void)drawRect:(CGRect)rect
{

// 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 画圆
    CGContextAddArc(ctx, 100, 100, 50, 0, 2 * M_PI, 0);

// 3.渲染 (注意, 画线只能通过空心来画)
//    CGContextFillPath(ctx);
    CGContextStrokePath(ctx);
   
}

效果:

代码2:

代码如下:

// 画圆
    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.画圆
    CGContextAddEllipseInRect(ctx, CGRectMake(50, 100, 50, 50));
   
    [[UIColor greenColor] set];
   
    // 3.渲染
    //    CGContextStrokePath(ctx);
    CGContextFillPath(ctx);

效果:

代码3:

代码如下:

// 画椭圆
    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.画圆
    CGContextAddEllipseInRect(ctx, CGRectMake(50, 100, 100, 230));
   
    [[UIColor purpleColor] set];
   
    // 3.渲染
    //    CGContextStrokePath(ctx);
    CGContextFillPath(ctx);

效果:

五、画圆弧

代码1:

代码如下:

// 画圆弧
    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.画圆弧
    // x/y 圆心
    // radius 半径
    // startAngle 开始的弧度
    // endAngle 结束的弧度
    // clockwise 画圆弧的方向 (0 顺时针, 1 逆时针)
    //    CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI_2, 0);
    CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
    CGContextClosePath(ctx);
   
    // 3.渲染
    //     CGContextStrokePath(ctx);
    CGContextFillPath(ctx);

效果:

代码2:

代码如下:

// 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.画饼状图
    // 画线
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 100, 150);
    // 画圆弧
    CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
    //    CGContextAddArc(ctx, 100, 100, 50, -M_PI, M_PI_2, 1);
   
    // 关闭路径
    CGContextClosePath(ctx);
    [[UIColor brownColor]set];
   
   
    // 3.渲染 (注意, 画线只能通过空心来画)
    CGContextFillPath(ctx);
    //    CGContextStrokePath(ctx);

效果:

六、画文字
代码:

代码如下:

//
//  YYtextview.m
//  04-写文字
//
//  Created by 孔医己 on 14-6-10.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYtextview.h"

@implementation YYtextview

- (void)drawRect:(CGRect)rect
{
   
    // 画文字
    NSString *str = @"的额搜风搜分手了粉色发俄双方说法offFF瓦房你F回复F入会费WFH;飞;FN返回WFH;哦发货;F回复;FHISFHSIFH我皮肤好APIFRHi分红AWFHIOF威锋网i";
   
    // 1.获取上下文
    //    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.绘图
    // 不推荐使用C语言的方法绘制文字, 因为quraz2d中的坐标系和UIkit中的坐标系不一致, 绘制出来的文字是颠倒的, 而且通过C语言的方法绘制文字相当麻烦
    //    CGContextSelectFont(<#CGContextRef c#>, <#const char *name#>, <#CGFloat size#>, <#CGTextEncoding textEncoding#>)
    //    CGContextShowText(ctx, <#const char *string#>, <#size_t length#>)
   
    // 绘制矩形
    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.绘图
    CGContextAddRect(ctx, CGRectMake(50, 50, 100, 100));
    // 3.渲染
    CGContextStrokePath(ctx);
   
   
//    NSMutableDictionary *md = [NSMutableDictionary dictionary];
//    // 设置文字颜色
//    md[NSForegroundColorAttributeName] =[UIColor redColor];
//    // 设置文字背景颜色
//    md[NSBackgroundColorAttributeName] = [UIColor greenColor];
//    // 设置文字大小
//    md[NSFontAttributeName] = [UIFont systemFontOfSize:20];
   
    //    将文字绘制到指点的位置
    //    [str drawAtPoint:CGPointMake(10, 10) withAttributes:md];
   
    //    将文字绘制到指定的范围内, 如果一行装不下会自动换行, 当文字超出范围后就不显示
    [str drawInRect:CGRectMake(50, 50, 100, 100) withAttributes:nil];
}

@end

效果:

图片

代码1:

代码如下:

//
//  YYimage.m
//  04-写文字
//
//  Created by 孔医己 on 14-6-10.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYimage.h"

@implementation YYimage

- (void)drawRect:(CGRect)rect
{
 
    //    1.加载图片到内存中
    UIImage *image = [UIImage imageNamed:@"me"];
   
   
    // 利用drawAsPatternInRec方法绘制图片到layer, 是通过平铺原有图片
    [image drawAsPatternInRect:CGRectMake(0, 0, 320, 480)];
}

@end

效果(平铺):

代码2:

代码如下:

#import "YYimage.h"

@implementation YYimage

- (void)drawRect:(CGRect)rect
{
 
    //    1.加载图片到内存中
    UIImage *image = [UIImage imageNamed:@"me"];
   
   
    // 利用OC方法将图片绘制到layer上
 
    // 利用drawInRect方法绘制图片到layer, 是通过拉伸原有图片
        [image drawInRect:CGRectMake(0, 0, 200, 200)];
   
    // 利用drawAsPatternInRec方法绘制图片到layer, 是通过平铺原有图片
//    [image drawAsPatternInRect:CGRectMake(0, 0, 320, 480)];
}

@end

效果(拉伸图片):

代码3:

代码如下:

//
//  YYimage.m
//  04-写文字
//
//  Created by 孔医己 on 14-6-10.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYimage.h"

@implementation YYimage

- (void)drawRect:(CGRect)rect
{
 
    //    1.加载图片到内存中
    UIImage *image = [UIImage imageNamed:@"me"];
   
   
    // 利用OC方法将图片绘制到layer上
   
    // 将图片绘制到指定的位置
    [image drawAtPoint:CGPointMake(100, 100)];
    }

效果(把图片绘制到一个固定的位置):

(0)

相关推荐

  • iOS开发中Quartz2D绘图路径的使用以及条纹效果的实现

    绘图路径 A.简单说明 在画线的时候,方法的内部默认创建一个path.它把路径都放到了path里面去. 1.创建路径  cgmutablepathref 调用该方法相当于创建了一个路径,这个路径用来保存绘图信息. 2.把绘图信息添加到路径里边. 以前的方法是点的位置添加到ctx(图形上下文信息)中,ctx 默认会在内部创建一个path用来保存绘图信息. 在图形上下文中有一块存储空间专门用来存储绘图信息,其实这块空间就是CGMutablePathRef. 3.把路径添加到上下文中. 代码示例: 绘

  • iOS开发中使用Quartz2D绘图及自定义UIImageView控件

    绘制基本图形 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 决定绘制的输出目标(绘制到什么地方去?)(输出目标可以是PDF文件.Bitmap或者显示器的窗口上) 相同的一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上. Quartz2D提供了以下几种类型的Graphics Context: Bitmap Graphics Context PDF Grap

  • iOS开发中使用Quartz2D绘制上下文栈和矩阵的方法

    上下文栈 一.qurza2d是怎么将绘图信息和绘图的属性绘制到图形上下文中去的? 说明: 新建一个项目,自定义一个view类和storyboard关联后,重写该类中的drowrect方法. 画线的三个步骤: (1)获取上下文 (2)绘图 (3)渲染 要求:画两条单独的线 代码和效果图: 复制代码 代码如下: - (void)drawRect:(CGRect)rect {     //获取上下文     CGContextRef ctx=UIGraphicsGetCurrentContext();

  • iOS开发之Quartz2D的介绍与使用详解

    一.前言 Quartz2D的API是纯C语言的,它是一个二维绘图引擎,同时支持iOS和Mac系统.Quartz2D的API来自于Core Graphics框架,数据类型和函数基本都以CG作为前缀.通常,我们可以使用系统提供的控件去完成大部分UI,但是有些UI界面极其复杂.而且比较个性化,用普通的UI控件无法实现,这时可以利用Quartz2D技术将控件内部的结构画出来,类似自定义控件.其实,iOS中大部分控件的内容都是通过Quartz2D画出来的,因此,Quartz2D在iOS开发中很重要的一个价

  • iOS开发中Quartz2D控制圆形缩放和实现刷帧效果

    Quartz2D简要回顾 一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 二.Quartz2D在iOS开发中的价值 为了便于搭建美观的UI界面,iOS提供了UIKit框架,⾥⾯有各种各样的UI控件 UILabel:显⽰文字 UIImageView:显示图片 UIButton:同时显示图片和⽂

  • 在iOS开发的Quartz2D使用中实现图片剪切和截屏功能

    图片剪切 一.使用Quartz2D完成图片剪切 1.把图片显示在自定义的view中 先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: 复制代码 代码如下: - (void)drawRect:(CGRect)rect {     UIImage *image2=[UIImage imageNamed:@"me"];     [image2 drawAtPoint:CGPointMake(100, 100)]; } 显示: 2.剪切图片让图片圆形展示 思路:先画一个圆

  • iOS开发中Quartz2D的基本使用方式举例

    一.画直线 代码: 复制代码 代码如下: // //  YYlineview.m //  03-画直线 // //  Created by apple on 14-6-9. //  Copyright (c) 2014年 itcase. All rights reserved. // #import "YYlineview.h" @implementation YYlineview // 当自定义view第一次显示出来的时候就会调用drawRect方法 - (void)drawRect

  • 深入讲解iOS开发中应用数据的存储方式

    XML属性列表-plist 一.应用沙盒 每个iOS应用都有⾃己的应⽤沙盒(应用沙盒就是文件系统目录),与其他文件系统隔离.应⽤必须待在⾃己的沙盒里,其他应用不能访问该沙盒(提示:在IOS8中已经开放访问) 应⽤沙盒的文件系统⽬录,如下图所示(假设应用的名称叫Layer) 模拟器应⽤用沙盒的根路径在: (apple是⽤用户名, 7.0是模拟器版本) /Users/apple/Library/Application Support/iPhone Simulator/7.0/Applications

  • 比较IOS开发中常用视图的四种切换方式

    在iOS开发中,比较常用的切换视图的方式主要有以下几种: 1. push.pop 使用举例(ViewController假设为需要跳转的控制器): [self.navigationController pushViewController:ViewController animated:YES]; //入栈,跳转到指定控制器视图 [self.navigationController popViewControllerAnimated:YES]; //弹栈,返回到前一个视图 [self.navig

  • iOS开发中UIWebView的加载本地数据的三种方式

    UIWebView是IOS内置的浏览器,可以浏览网页,打开文档 html/htm pdf docx txt等格式的文件. safari浏览器就是通过UIWebView做的. 服务器将MIME的标识符等放入传送的数据中告诉浏览器使用那种插件读取相关文件. uiwebview加载各种本地文件(通过loadData方法): UIWebView加载内容的三种方式: 1 加载本地数据文件 指定文件的MIMEType 编码格式使用@"UTF-8" 2加载html字符串(可以加载全部或者部分html

  • IOS开发中加载大量网络图片优化方法

    IOS开发中加载大量网络图片如何优化 1.概述 在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着才能把图片放入图片路径显示.比如: -(UIImage *) getImageFromURL:(NSString *)fileURL { //NSLog(@"执行图片下载函数"); UIImage * result; NSData * data = [NSData dataWithCont

  • 详解IOS开发中生成推送的pem文件

    详解IOS开发中生成推送的pem文件 具体步骤如下: 首先,需要一个pem的证书,该证书需要与开发时签名用的一致. 具体生成pem证书方法如下: 1. 登录到 iPhone Developer Connection Portal(http://developer.apple.com/iphone/manage/overview/index.action )并点击 App IDs 2. 创建一个不使用通配符的 App ID .通配符 ID 不能用于推送通知服务.例如,  com.itotem.ip

  • iOS开发中AVPlayer的简单应用

    前言 在iOS开发中,播放视频通常有两种方式,一种是使用MPMoviePlayerController(需要导入MediaPlayer.Framework),还有一种是使用AVPlayer.关于这两个类的区别简而言之就是MPMoviePlayerController使用更简单,功能不如AVPlayer强大,而AVPlayer使用稍微麻烦点,不过功能更加强大.下面这篇文章主要介绍下AVPlayer的简单应用,需要的朋友们一起来看看吧. AVPlayer的简单应用 1.引入系统框架 2.创建视频的u

  • iOS开发中使用UIScrollView实现无限循环的图片浏览器

    一.概述 UIKit框架中有大量的控件供开发者使用,在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件.在这个系列中如果每个控件都介绍一遍确实没有必要,所谓授人以鱼不如授人以渔,这里会尽可能让大家明白其中的原理,找一些典型的控件进行说明,这样一来大家就可以触类旁通.今天我们主要来看一下UIScrollView的内容: UIView UIScrollView 实战--图片浏览器 二.UIView 在熟悉UIScrollView之前很有必要说一下UIView的内容.

随机推荐