前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation matrix)来修坐标系的原点。从数组图像处理的角度来说,就是对当前context state乘以一个状态矩阵。其中的矩阵运算开发者可以不了解。


以下,会一一个Demo图解,坐标系的位移,旋转,sacle

最初的状态和代码

新建一个CustomView,.m文件

@implementation CustomView

- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext(); CGContextAddRect(context, CGRectMake(10,10,40, 20));
CGContextSetFillColorWithColor(context,[UIColor blueColor].CGColor);
CGContextFillPath(context);
}
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
self.opaque = NO;
self.layer.borderColor = [UIColor lightGrayColor].CGColor;
self.layer.borderWidth = 1.0;
}
return self;
}
@end

调用

  CustomView * customView = [[CustomView alloc] initWithFrame:CGRectMake(100, 100,100, 100)];
[self.view addSubview:customView];

图解


Translate

假如我们在绘制之前,进行坐标系移动会是什么效果呢?
代码

- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context,10, 10); CGContextAddRect(context, CGRectMake(10,10,40, 20));
CGContextSetFillColorWithColor(context,[UIColor blueColor].CGColor);
CGContextFillPath(context);
}

效果

代码中,我们是还是在(10,10)点绘制,但是要注意,当前坐标系的原点已经移了


Rotate

在Transform的基础上我们再Rotate,45度,注意CGContextRotateCTM传入的参数是弧度
代码

- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context,10, 10);
CGContextRotateCTM(context,M_PI_4);
CGContextAddRect(context, CGRectMake(10,10,40, 20));
CGContextSetFillColorWithColor(context,[UIColor blueColor].CGColor);
CGContextFillPath(context);
}

效果


Scale

对于Scale相对来说,好理解一点,无非就是成比例放大缩小。
这里不花坐标系了
代码

- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context,10, 10);
CGContextRotateCTM(context,M_PI_4);
CGContextScaleCTM(context,0.5, 0.5);
CGContextAddRect(context, CGRectMake(10,10,40, 20));
CGContextSetFillColorWithColor(context,[UIColor blueColor].CGColor);
CGContextFillPath(context);
}

效果


状态保存,恢复

在复杂的绘图中,我们可能只是想对一个subpath进行旋转移动,缩放。这时候,状态堆栈就起到作用了。
代码

- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
//保存状态,入栈
CGContextSaveGState(context);
CGContextTranslateCTM(context,10, 10);
CGContextRotateCTM(context,M_PI_4);
CGContextScaleCTM(context,0.5, 0.5);
CGContextAddRect(context, CGRectMake(10,10,40, 20));
CGContextSetFillColorWithColor(context,[UIColor blueColor].CGColor);
CGContextFillPath(context);
CGContextRestoreGState(context);// 推出栈顶部状态 //这里坐标系已经回到了最开始的状态
CGContextAddRect(context, CGRectMake(0, 0, 10, 10));
CGContextFillPath(context);
}

效果


Affine Transforms

可以通过以下方法先创建放射矩阵,然后然后再把放射矩阵映射到CTM

    • CGAffineTransform
    • CGAffineTransformTranslate
    • CGAffineTransformMakeRotation
    • CGAffineTransformRotate
    • CGAffineTransformMakeScale
    • CGAffineTransformScale

iOS 2D绘图详解(Quartz 2D)之Transform(CTM,Translate,Rotate,Scale)的更多相关文章

  1. iOS 2D绘图详解(Quartz 2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)

    前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用.例如:point,line,Arc(圆弧),Curves(曲线),Ellip ...

  2. iOS 2D绘图详解(Quartz 2D)之概述

    前言:最近在研究自定义控件,由于想要彻底的定制控件的视图还是要继承UIView,虽然对CALayer及其子类很熟练,但是对Quartz 2D这个强大的框架仍然概念模棱两可.于是,决定学习下,暂定7篇文 ...

  3. iOS 2D绘图详解(Quartz 2D)之阴影和渐变(Shadow,Gradient)

    前言:这个系列写道这里已经是第五篇了,本文会介绍下阴影和渐变的基础知识,以及一些基本的Demo Code展示,应该还会有两篇,介绍下Bitmap绘制以及Pattern等知识. Shadow shado ...

  4. iOS开发 绘图详解

    Quartz概述 Quartz是Mac OS X的Darwin核心之上的绘图层,有时候也认为是CoreGraphics.共有两种部分组成   Quartz Compositor,合成视窗系统,管理和合 ...

  5. iOS 2D绘图详解(Quartz 2D)之Bitmap

    什么是Bitmap? Bitmap叫做位图,每一个像素点由1-32bit组成.每个像素点包括多个颜色组件和一个Alpha组件(例如:RGBA). iOS中指出如下格式的图片 JPEG, GIF, PN ...

  6. iOS 2D绘图详解(Quartz 2D)之路径(stroke,fill,clip,subpath,blend)

    Stroke-描边 影响描边的因素 线的宽度-CGContextSetLineWidth 交叉线的处理方式-CGContextSetLineJoin 线顶端的处理方式-CGContextSetLine ...

  7. iOS中-Qutarz2D详解及使用

    在iOS中Qutarz2D 详解及使用 (一)初识 介绍 Quartz 2D是二维绘图引擎. 能完成的工作有: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成 ...

  8. 【转】Android Canvas绘图详解(图文)

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...

  9. 转载]IOS LBS功能详解[0](获取经纬度)[1](获取当前地理位置文本 )

    原文地址:IOS LBS功能详解[0](获取经纬度)[1](获取当前地理位置文本作者:佐佐木小次郎 因为最近项目上要用有关LBS的功能.于是我便做一下预研. 一般说来LBS功能一般分为两块:一块是地理 ...

随机推荐

  1. hdu 3635 Dragon Balls(加权并查集)2010 ACM-ICPC Multi-University Training Contest(19)

    这道题说,在很久很久以前,有一个故事.故事的名字叫龙珠.后来,龙珠不知道出了什么问题,从7个变成了n个. 在悟空所在的国家里有n个城市,每个城市有1个龙珠,第i个城市有第i个龙珠. 然后,每经过一段时 ...

  2. java web 学习十(HttpServletRequest对象1)

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...

  3. util-C# 复杂条件查询(sql 复杂条件查询)查询解决方案

    ylbtech-funcation-util:  C# 复杂条件查询(sql 复杂条件查询)查询解决方案 C# 复杂条件查询(sql 复杂条件查询)查询解决方案 1.A,Ylbtech.Model返回 ...

  4. HDU-1584 蜘蛛牌(dfs)

    可以多看看. 蜘蛛牌 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  5. Chrome的网络调试

    F12 然后

  6. bzoj 1324 Exca王者之剑(黑白染色,最小割)

    [题意] 两相邻点不能同时选,选一个点集使得权值和最大. 出题人语文好... [思路] 将图进行黑白二染色,然后构建最小割模型. [代码] #include<set> #include&l ...

  7. HTTP知识填补

    1.HTTP协议 HTTP协议是计算机通信的一种协议 流程: 1.http客户端发起请求,例如手机访问baidu.com,创建端口,一般位80 2.http服务器在端口监听客户端请求 3.http接收 ...

  8. 五、python使用模块

    if __name__=='__main__':用法: 当我们在命令行运行模块文件时,Python解释器把一个特殊变量__name__置为__main__,而如果在其他地方导入该hello模块时,if ...

  9. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

  10. 【转】一步步教你读懂NET中IL(图文详解)

    本文章以一个实际的例子,让你了解堆叠式 VM 的运作原理,并对 .NET IL(Intermediate Language)有最基本的領略,需要的朋友可以参考下  .NET CLR 和 Java VM ...