在使用CGContext时,由于Quartz 2D与UIKit坐标不一致,所以需要对context进行再一次的变化,达到预期的效果。

1. 不同坐标原点介绍

在Quartz 2D中,坐标原点在画布的左下角,而UIKit中,与屏幕坐标一致,以左上角为坐标原点。

如果以(0,0)点为原点绘制F,那么在不同的坐标系就会获得如下的结果。

2. Quartz 2D与UIKit坐标系转化

2.1 UIImage绘制

在iOS的UI开发中,以UIImage为例,绘制一张图片,设置image的frame为(0, 0, 320, 320),会得到上图右的画面。

如果使用如下代码读取Context的transform,可以看到这个transform并不是单位矩阵。

CGRect frame = CGRectMake(0.0, 0.0, 720, 1280);

UIGraphicsBeginImageContext(frame.size);

CGContextRef context = UIGraphicsGetCurrentContext();

CGAffineTransform contextTransform = CGContextGetCTM(context);;

这里的transform设置会使Quartz 2D与UIKit的坐标原点重合,也是方便了UIKit中控件的绘制,坐标系变化可以参考下图。



这也是为什么如果直接在获取到的context上调用CGContextDrawImage时会得到一个反转的图像的原因。

但如果使用UIImage的drawInRect方法,文档是这么写的:

Instance Method

draw(in:)

Draws the entire image in the specified rectangle, scaling it as necessary to fit.

Declaration

func draw(in rect: CGRect)

Parameters

rect

The rectangle (in the coordinate system of the graphics context) in which to draw the image.

Discussion

This method draws the entire image in the current graphics context, respecting the image’s orientation setting. In the default coordinate system, images are situated down and to the right of the origin of the specified rectangle. This method respects any transforms applied to the current graphics context, however.

This method draws the image at full opacity using the CGBlendMode.normal blend mode.

也就是说,UIImage绘制时使用的坐标还是UIKit的内部坐标,所以并不需要对坐标系做任何变化,就可以绘制出与rect位置相同的图片了,当然这个方法也会根据图片的朝向绘制。

2.2 CGContextDrawImage绘制

在改变context的transform时,实际上在变化的其实是坐标系本身。

而调用绘制方法时,使用的还是坐标系内部坐标,所以当我们想基于获取到的context绘制一个如UIKit显示的图片,我们还需要对绘制前的坐标系做调整。

//Y轴翻转

CGContextScaleCTM(context, 1, -1);

//需要图片原点与左上角对齐,还需Y轴向下平移图片高度

CGContextTranslateCTM(context, 0, -imageSize.height);

//绘制图片

CGContextDrawImage(context, frame, image.CGImage);

3 transform锚点变化

比如图片编辑页面,我们经常能碰到使用手势对图片进行缩放旋转位移等变化,之后生成一张新的图片。

根据不同的手势回调,我们可以修改view.transform,使得界面上的view产生与手势相应的变化。

在这里,UIKit为了方便我们修改UI界面,view的transform是以view的center为锚点的。

UIView的transform里面的描述是使用center来修改position。

Use this property to scale or rotate the view's frame rectangle within its superview's coordinate system. (To change the position of the view, modify the center property instead.) The default value of this property is CGAffineTransformIdentity.

而很多其他的方法在调用时,transform都需要以左上角为锚点,所以这里有需要做一次转化,锚点影响如下图。



在UI界面的修改中,我们可以使用缩放和旋转手势的回调值直接修改view的transform,以及位移的回调来修改center,便可以达到我们预期的效果。但这个transform无法使用在context的绘制上,因为坐标系的变化,是以原点为锚点来做的。

所以针对context现有坐标系的位置,锚点在左上角,需要进行一次transform的修改。

根据上图也可以看出,锚点只会对位置信息产生影响,并不会改变缩放和旋转。

UIImage *image; //初始化图片

UIView *view;//应用变化的view,view的size跟image要一致保证缩放比例是对的。

CGAffineTransform transform = view.transform;

CGSize imageSize = image.size;

transform.tx = view.center.x;

transform.ty = view.center.y;

transform = CGAffineTransformTranslate(transform, -imageSize.width * 0.5, -imageSize.height * 0.5);

其中tx,ty为锚点在坐标系的位置

当前的锚点在视图的中心点,我们需要改变到视图的左上角,这样就可以和坐标系原点重合。其中(imageSize.width * 0.5, imageSize.height * 0.5)为锚点在图片中的位置,此时transform为锚点在视图左上角时的变化矩阵。

4. 组合Transform

在CGContext上想得到上图中间的结果,不仅需要应用缩小1/2和旋转45度的变化,还需要调整。

之前说过CGContext应用旋转是应用在坐标系上,跟视图应用旋转的方式是自身坐标系是一致的。所以当直接获取到的CGContext,优化后的坐标系也是左上角为原点时,可以直接再CGContext上应用我们计算出的transform。

之后还是由于坐标系绘制是以自身坐标系计算,再做一轮坐标系的翻转和位移来得到最后的结果,类似下图的操作。

这里需要注意,每一次新的变化都是在之前变化的基础上,所以无论是view还是对context的transform做修改都是有顺序的,这一点与矩阵乘法一致,顺序会影响结果。

iOS Transform坐标变化的更多相关文章

  1. transform图形变化

    <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...

  2. Web开发者和设计师必须要知道的 iOS 8 十个变化

    原文出处: mobilexweb   译文出处:罗磊(@罗罗磊磊)   欢迎分享原创到伯乐头条 喜大普奔,喜极而泣,喜当爹,随着iPhone 6和iPhone 6 plus的上市,ios 8终于在上周 ...

  3. iOS 火星坐标相关整理及解决方案汇总(转)

    这几天在处理定位相关的代码,彻彻底底的被火星坐标恶心到了. 恶心列表 从 CLLocationManager 取出来的经纬度放到 mapView 上显示,是错的! 从 CLLocationManage ...

  4. 百度地图 iOS SDK - 坐标转换方法

    百度地图 Android SDK 要么 iOS SDK 或各种 API 工具产品,我们使用百度自己的加密坐标系. 员在使用过程中,位置点都是通过 GPS 或者其它途径获取的.所以与百度地图所使用的坐标 ...

  5. iOS 通知的变化ios9-10,新功能展示

    二.新功能展示 1  使用 /iOS通知新功能玩法 2.  全面   iOS10里的通知与推送详情 一.变化 四.Notification(通知) 自从Notification被引入之后,苹果就不断的 ...

  6. iOS transform属性的使用

    1.transform属性 在iOS开发中,通过transform属性可以修改UIView对象的平移.缩放比例和旋转角度,常用的创建transform结构体方法分两大类 (1) 创建“基于控件初始位置 ...

  7. IOS transform的使用(移动,放大,旋转)

    @interface ViewController () - (IBAction)up; - (IBAction)big ; - (IBAction)leftRotate ; @property (n ...

  8. iOS 定位坐标不准确的相关整理及解决方案汇总

    这几天处理定位相关的代码,彻彻底底的被火星坐标恶心到了. 恶心列表 从 CLLocationManager 取出来的经纬度放到 mapView 上显示,是错的! 从 CLLocationManager ...

  9. iOS transform解决连续多次旋转缩放,实现图片旋转缩放效果

    一.需求 实现imageView的缩放旋转效果,一般有两种方式: 1.底层加scrollview,利用scrollview的属性实现.(推荐这种,这是我比较后发现的,手势做缩放旋转会有点弊端) 2.利 ...

随机推荐

  1. java内存模型深入理解

    作为一个java程序员 jvm 虚拟机应该是最先接触的了,但是当初由于理解能力有限一直没搞明白是怎么回事,而是将他理解为运行java程序的环境,不过这也没错.但是随着工作时间的增加开始思考jvm里面工 ...

  2. Mybatis项目搭建

    MyBatis是一个优秀的持久层框架.原生的jdbc操作存在大量的重复性代码(如注册驱动,创建连接,创建statement,结果集检测等).框架的作用就是把这些繁琐的代码封装. MyBatis通过XM ...

  3. git删除缓存区中文件

    删除缓冲区中的文件 git rm --cached "文件路径",不删除物理文件,仅将该文件从缓存中删除: git rm --f "文件路径",不仅将该文件从缓 ...

  4. webpack5文档解析(下)

    声明:所有的文章demo都在我的仓库里 代码分离 代码分离的有点在于: 切割代码,生成不同的打包文件,按需加载这些文件. 每个bundle的体积更小 控制外部资源的加载顺序 常用的方法有: 入口起点: ...

  5. jQuery load() 中文乱码

    1.使用editplus创建了demo.txt (ANSI保存的), $("#div1").load("demo.txt");//div显示中文乱码---> ...

  6. ElasticSearch详细笔记

    ElasticSearch详细笔记 什么是ElasticSearch Elasticsearch(简称ES)是一个基于Apache Lucene(TM)的开源搜索引擎,无论在开源还是专有领域,Luce ...

  7. Parcelable使用(一)

    android有两种序列化方式:一是实现Serializable接口(是JavaSE本身就支持的),二是实现Parcelable接口(是Android特有功能,效率比实现Serializable接口高 ...

  8. VS 2019 远程调试

    一.简介 今天遇到一个问题,本地调试无任何问题,但是发布后代码服务器端响应总是不对.所以想调试下.故搞个远程调试.现在先配置下工具.步骤如下. 二.步骤 2.1.远程访问工具下载 地址:https:/ ...

  9. Git之同一台电脑连接多个远程仓库

    问题描述 有时候我们需要在同一台电脑上连接多个远程仓库,比如连接两个GitHub账号,那么需要两个条件. 1.生成两对 私钥/公钥,并且密钥文件命名不能重复. 2.push 到remote时区分两个账 ...

  10. 记录电子竞技游戏jesp中的传输过程公式

    1.json数据转换成字典 dict1 = json.load(load_f1) dict2 = json.load(load_f2) 2.将两个字典按key排好序,然后使用zip()函数将两个字典对 ...