草庐IT

一文弄懂CGAffineTransform和CTM

iOS小熊 2023-03-28 原文
一文弄懂CGAffineTransform和CTM

  • 一些概念

坐标空间（系）：视图（View）坐标空间与绘制（draw）坐标空间
CTM：全称current transformation matrix，看名称 “当前变换矩阵” 也就是矩阵。
CGAffineTransform：是一个具体的矩阵数据值。CGAffineTransform是CTM的具体值。

  • 关于矩阵变换

相同CGAffineTransform作用于不同的坐标空间，其结果不一样。

移动：

视图空间 中心为原点，向右为x递增，向下y递增，CGAffineTransformMakeTranslation(-75, 25);  左移75，下移25
绘制空间 左下点为原点，向右为x递增，向上y递增，CGAffineTransformMakeTranslation(-75, 25);  左移75，上移25

视图空间示例：_demoView.transform = CGAffineTransformMakeTranslation(-75, 25);

绘制空间示例：
CGContextConcatCTM(ctx, CGAffineTransformMakeTranslation(-75, 25));
CGContextDrawImage(ctx, CGRectMake(0, 0, imageWidth, imageHeight), self.image.CGImage);


旋转：
视图空间 中心为原点，向右为x递增，向下y递增， transform = CGAffineTransformRotate(transform, -M_PI_2); 围绕中心点，逆时针旋转90度
绘制空间 左下点为原点，向右为x递增，向上y递增 transform = CGAffineTransformRotate(transform, -M_PI_2); 围绕左下角点，顺时针旋转90度

视图空间示例：_demoView.transform = CGAffineTransformRotate(transform, -M_PI_2);

绘制空间示例：
CGContextConcatCTM(ctx, CGAffineTransformRotate(transform, -M_PI_2););
CGContextDrawImage(ctx, CGRectMake(0, 0, imageWidth, imageHeight), self.image.CGImage);

缩放：
视图空间 默认以中心点为原点 transform = CGAffineTransformMakeScale(1, -1); 沿着中心X轴线竖直翻转
绘制空间 默认以左下角为原点 transform = CGAffineTransformMakeScale(1, -1); 沿着X轴横线竖直翻转

视图空间示例：_demoView.transform = CGAffineTransformMakeScale(1, -1);

绘制空间示例：
CGContextConcatCTM(ctx, CGAffineTransformMakeScale(1, -1));
CGContextDrawImage(ctx, CGRectMake(0, 0, imageWidth, imageHeight), self.image.CGImage);

如果我们现在想要把上面的图片逆时针旋转90度，可以使用CGAffineTransform组合的方式。这里提供两种转换方式，都是采用的平移、旋转，执行顺序不同导致，给的参数也不同。后续说明原因。
方法一：

//移动到屏幕右边
transform = CGAffineTransformTranslate(transform, imageHeight,0);
//逆时针旋转90度
transform = CGAffineTransformRotate(transform, M_PI_2);
//将transform作用于context
CGContextConcatCTM(ctx, transform);
CGContextDrawImage(ctx, CGRectMake(0, 0, imageWidth, imageHeight), self.image.CGImage);


方法二：
//逆时针旋转90度
transform = CGAffineTransformRotate(transform, M_PI_2);
//右移图片高度的距离
transform = CGAffineTransformTranslate(transform, 0,-imageHeight);
CGContextConcatCTM(ctx, transform);
CGContextDrawImage(ctx, CGRectMake(0, 0, imageWidth, imageHeight), self.image.CGImage);

执行结果如下
CGAffineTransformRotate组合坐标系问题
注意：所有的变换都会影响到坐标系产生新的坐标系。比如：旋转转换，坐标系也跟着旋转，按照X轴翻转缩放，坐标系也会翻转。
解释一下逆时针旋转图片 方法一 和 方法二
方法一比较容易理解，
1.右移图片宽度
2.左下角 为圆心，逆时针旋转90度。


重点说明下方法二
1.逆时针旋转90度
2.右移图片高度。

逆时针旋转大家容易理解，但是，右移图片高度为什么是transform = CGAffineTransformTranslate(transform, 0,-imageHeight);？？？
谜底是，逆时针旋转的时候，坐标系也跟着逆时针旋转90度，变成了右下角为原点，y左边递增，右边递减。x上方向递增，下方向递减。所以此时想要把图片向右边移动-imageHeight的距离，按照新的坐标系，就是往y轴的递减方向走。也就有了transform = CGAffineTransformTranslate(transform, 0,-imageHeight);

  • 关于CGContextDrawImage

DrawImage绘制什么情况是颠倒的，什么情况不是颠倒的，坐标系又是什么样的？

使用UIGraphicsGetCurrentContext()获取的上下文，CGContextDrawImage是颠倒的。想要正向的图片需要做CTM变换。
-(void)drawImage{
    
    CGFloat imageWidth = CGImageGetWidth(self.image.CGImage);
    CGFloat imageHeight = CGImageGetHeight(self.image.CGImage);
    
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(imageWidth, imageHeight), 0, [UIScreen mainScreen].scale);
    CGContextRef context = UIGraphicsGetCurrentContext();

//，为了保证正向显示图片，需要先上移图片高度，再沿X轴翻转。
//    CGContextTranslateCTM(context, 0, imageHeight);
//    CGContextScaleCTM(context, 1, -1);
// 使用转换之后的坐标系绘制图片
    CGContextDrawImage(context, CGRectMake(0, 0, imageWidth, imageHeight), self.image.CGImage);
    
    UIImage *newImg = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    self.imageView.image = newImg;
}

 自己创建位图，再调用CGContextDrawImage，并不会出现上下颠倒的问题。
-(void)drawImage{
    
    CGFloat imageWidth = CGImageGetWidth(self.image.CGImage);
    CGFloat imageHeight = CGImageGetHeight(self.image.CGImage);
    
    //创建位图上下文
    CGContextRef ctx = CGBitmapContextCreate(NULL, imageHeight,imageWidth,
                                             CGImageGetBitsPerComponent(self.image.CGImage), 0,
                                             CGImageGetColorSpace(self.image.CGImage),
                                             CGImageGetBitmapInfo(self.image.CGImage));
    //这里drawImage是正的。
    CGContextDrawImage(ctx, CGRectMake(0, 0, imageWidth, imageHeight), self.image.CGImage);
    CGImageRef cgimg = CGBitmapContextCreateImage(ctx);
    UIImage *img = [UIImage imageWithCGImage:cgimg];
    CGContextRelease(ctx);
    CGImageRelease(cgimg);
    self.imageView.image = img;
    return ;
}

CGContextDrawImage的坐标系
默认是以左下角为坐标原点开始绘制，但是，But，通过一系列的CTM转换之后，最终的绘制坐标CGRectMake(0, 0, imageWidth, imageHeight)是根据新的坐标系计算的。比如逆时针旋转90度的例子，新坐标系 原点为右下角，y左边递增，右边递减。x上方向递增

CGContextDrawImage(ctx, CGRectMake(100, 100, imageWidth, imageHeight), self.image.CGImage);

关于CGRectApplyAffineTransform转换CGRect

  • 关于CGRectApplyAffineTransform转换CGRect

CGrectApplyAffineTrans对于平移、缩放、旋转的表现情况


CGRectApplyAffineTransform(CGRect rect, CGAffineTransform t) 在当前坐标系，对rect做仿射变换之后，得到的新rect。
//平移
    CGRect rc = CGRectMake(100, 0, 100, 200);
    //打印结果为(200, 100, 100, 200);
    CGRect newRC = CGRectApplyAffineTransform(rc, CGAffineTransformMakeTranslation(100, 100));

//缩放
    CGRect rc = CGRectMake(100, 0, 100, 200);
    //打印结果为 (200, 0, 200, 400); 所有值都乘了2
    CGRect newRC = CGRectApplyAffineTransform(rc, CGAffineTransformMakeScale(2, 2));


//旋转
    CGAffineTransform transform = CGAffineTransformMakeTranslation(0, 0);
    transform = CGAffineTransformRotate(transform, -M_PI_2);
    
    CGRect rc = CGRectMake(100, 0, 100, 200);
    //打印结果为(0, -200, 200, 100); 得到的是相对于(0,0)旋转90度的值
    CGRect newRC = CGRectApplyAffineTransform(rc, transform);
   

//平移 + 缩放
    CGAffineTransform transform = CGAffineTransformMakeTranslation(100, 100);
    transform = CGAffineTransformScale(transform, 2, 2);
    CGRect rc = CGRectMake(100, 0, 100, 200);
    //打印为(300, 100, 200, 400); 先计算了缩放，再计算平移得到此值
    CGRect newRC = CGRectApplyAffineTransform(rc, transform);

//平移+旋转
    CGAffineTransform transform = CGAffineTransformMakeTranslation(100, 100);
    transform = CGAffineTransformRotate(transform, -M_PI_2);
    
    CGRect rc = CGRectMake(100, 0, 100, 200);
    //打印为(100, -100, 200, 100);  先计算了旋转，再计算平移得到此值
    CGRect newRC = CGRectApplyAffineTransform(rc, transform);

//平移 + 旋转 + 缩放

    CGAffineTransform transform = CGAffineTransformMakeTranslation(100, 100);
    transform = CGAffineTransformRotate(transform, -M_PI_2);
    transform = CGAffineTransformScale(transform, 2, 2);
    CGRect rc = CGRectMake(100, 0, 100, 200);
    //打印为 (100, -300, 400, 200); 先计算了旋转/缩放，再计算平移得到此值
    CGRect newRC = CGRectApplyAffineTransform(rc, transform);

总结：
    平移：CGRectApplyAffineTransform对于平移转换是与实际变换结果一致的。
    旋转：以当前坐标系原点（0，0）进行旋转计算后的值。
    缩放：得到的结果为，rect中的各个值乘以缩放比例。
    组合变换：先计算旋转和缩放，最后计算平移

一文弄懂nbspdivfont移动端开发

有关一文弄懂CGAffineTransform和CTM的更多相关文章

  1. 一文解决关于VLAN所有的疑惑 - 2

    一文解决关于VLAN所有的疑惑VLAN基本概念为什么需要VLAN？怎么在交换机上划分VLAN，VLAN的工作原理有了子网，已经隔离了广播，还需要VLAN干啥？只进行子网划分，不进行VLAN划分VLAN划分与子网划分附加VLAN信息的方法VLAN划分交换机的端口类型（Access和Trunk）一、访问链接二、汇聚链接汇聚链接VLAN间通信为什么要进行VLAN间通信？路由器实现VLAN间通信路由器和交换机的连接方式通信细节三层交换机实现VLAN间通信加速VLAN间通信三层交换机与路由器三层交换机路由器路由器和交换机配合构建LAN的实例使用VLAN设计局域网的特点VLAN增加网络的灵活性不使用VLA

  2. 一文让你彻底掌握操作符（超详细教程） - 2

    ✅作者简介：大家好，我是小杨📃个人主页：「小杨」的csdn博客🔥系列专栏：小杨带你玩转C语言【初阶】🐳希望大家多多支持🥰一起进步呀！大家好呀！我是小杨。小杨花几天的时间将C语言中的操作符这部分知识做了一个大总结，在方便自己复习的同时也能够帮助到大家。通篇字数在一万字左右，可以算作是非常详细了，一文就可以带领大家彻底掌握操作符这部分内容，文章很长建议先收藏再看，防止下次想看就找不到啦。文章目录✍1，算术操作符✍2，移位操作符    🔍2.1,左移操作符    🔍2.2,右移操作符       ✨2.2.1,算术移位       ✨2.2.2,逻辑移位✍3，位操作符    🔍3.1,按位与&   

  3. 一文掌握软件项目成本预算、估算的方法和成本控制的秘籍 - 2

    每个企业都希望在完成项目后获得盈利，但不少企业到了年终后才发现项目做了不少，公司却并没能达到预期，甚至还出现了亏损。那么钱究竟去了哪里？很多公司都搞不清楚原因，出现糊涂账较多的状况，这将会造成严重的后果，尤其在疫情影响下，大环境很恶劣，如果是大公司的事业部门出现亏损，就可能会导致事业部门解散；如果是小公司出现亏损，就很容易导致公司倒闭；怎样做才能确保我们所完成的项目都能获利？从财务角度看，要确保盈利必须做到合理估算成本，只有这样才能在对外签订合约时做出合理报价，在对内在开始项目前做出充分评估投入代价，同时在实施过程中还要控制成本得当，最后项目结束时才会有可能获得盈利。那么我们怎样才能准确的判断

  4. 一文详解COINDAO是什么？ - 2

    COINDAO旨在重建社区信任和安全。基于皖北基因的强烈共识，COINDAO自发产生了一个共创、共建、共治、共享的协作组织。它专注于DAO投资管理协议，为新的优质项目创造增长技术和资金。COINDAO的使命就是为真正的优质项目打造一个去中心化、公开透明的平台，让各个赛道上的优质项目能够以更低的成本快速募集资金并向公众开放.打破头部垄断。让真正的爱好者直接获得早期参与优质项目的资格，不再遥不可及，构建生态应用的可信体系，打造人人参与共建、人人共享的去中心化DAO好处。生态系统，我们称之为COINDAO生态系统。COINDAO国内各大财经网站宣发如下：COINDAO国外各大财经网站宣发： COIN

  5. 一文吃透前端低代码的 “神仙生活” - 2

    今天来说说前端低代码有多幸福？低代码是啥？顾名思义少写代码……这种情况下带来的幸福有：代码写得少，bug也就越少（所谓“少做少错”），因此开发环节的两大支柱性工作“赶需求”和“修bug”就都少了；要测的代码少了，那么测试用例也可以少写了。所以，总结低代码带来的幸福感有这三大点：开发效率提高开发成本减少维护性更高针对上述三点，我们展开说说。01、开发效率提高对于低代码的理解，个人认为可以通过配置化的低成本交互方式（主流是拖拽）加上少量的胶水代码，去满足一类应用的需求。这就说明，基于低代码，开发人员无需代码或说只需少量代码就可以开发出各类应用管理系统，如：OA协同办公、KM知识管理、CRM客户关系

  6. 【C语言进阶】还说不会？一文带你全面掌握计算机预处理操作 - 2

    目录🍊前言🍊：🍈一、宏与函数🍈：        1.宏与函数对比：    2.宏与函数的命名约定：🍓二、预处理操作符🍓：    1.预处理操作符"#"：    2.预处理操作符"##"：🥝三、条件编译🥝：    1.简述条件编译指令：    2.常见条件编译指令：🍒总结🍒：🛰️博客主页：✈️銮同学的干货分享基地🛰️欢迎关注：👍点赞🙌收藏✍️留言🛰️系列专栏：💐【进阶】C语言学习            🧧  C语言学习🛰️代码仓库：🎉VS2022_C语言仓库    家人们更新不易，你们的👍点赞👍和⭐关注⭐真的对我真重要，各位路过的友友麻烦多多点赞关注，欢迎你们的私信提问，感谢你们的转发！    

  7. 一文带你通俗理解23种软件设计模式（推荐收藏，适合小白学习，附带C++例程完整源码） - 2

    作者：翟天保Steven版权声明：著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处一、设计模式是什么？    设计模式是为了解决在软件开发过程中遇到的某些问题而形成的思想。同一场景有多种设计模式可以应用，不同的模式有各自的优缺点，开发者可以基于自身需求选择合适的设计模式，去解决相应的工程难题。    良好的软件设计和架构，可以让代码具备良好的可读性、可维护性、可扩展性、可复用性，让整个系统具备较强的鲁棒性和性能，减少屎山代码出现的概率。    想要熟练运用设计模式，提高自己的编程能力和架构能力，只有在自己工作中，结合自身工作内容，多思考多实践。本文只能通过举一些通俗的例子，来

  8. 一文读懂Elephant Swap，为何为ePLATO带来如此高的溢价？ - 2

    自今年4月以来，在经历了UST脱锚，所引发的头部投资机构、独角兽CeFi平台的相继“破产”，加密行业迎来了前所未有的发展危机，一方面在于市场信心不足甚至恐慌，导致的资金加速出逃，另一方面市场整体增速缓慢导致各个板块收益疲软，导致投资者们难以获得可观的收益回报，市场进一步陷入新一轮的恶性循环。当然，即便是市场整体处于下行周期，但加密市场仍旧存在诸多的获利机会，新型LaaS协议ElephantSwap正在通过其独特的LaaS方案，来为DeFi市场恢复流动性注入信心，同时为投资者带来十分可观的套利空间。目前，PlatoFarm是首个使用ElephantSwap流动性服务的项目，投资可以通过将手中的P

  9. Flyway详解（使用说明及避坑指南、一文搞懂flyway） - 2

    一、简介1.1Flyway是什么？Flyway是一款开源的数据库版本管理工具，可以实现管理并跟踪数据库变更，支持数据库版本自动升级，而且不需要复杂的配置，能够帮助团队更加方便、合理的管理数据库变更。例：创建两个sql变更文件，项目启动后会将两个文件中的sql语句全部执行。1.2为什么使用Flyway？简单举个例子：开发时，如果A开发和B开发都对同一数据库进行了修改，那么如何进行数据同步呢？假如多个开发人员都修改了sql脚本，怎么同步到测试环境和生产环境？类似于以上的情况在日常开发中不胜枚举，在最开始的单体架构中，我们公司采用了通过校验数据库版本号来实现sql的变更，这虽然能够解决大部分问题，但

  10. 【数据结构】速速收藏，一文带你参透双向链表各接口实现 - 2

    目录🥕前言🥕：🌽一、双向链表概述🌽：1.双向链表概念：2.双向链表结构：🍆二、双向链表接口实现🍆：1.工程文件建立：2.接口实现（本文重点）：Ⅰ.双向链表初始化：Ⅱ.打印双向链表：Ⅲ.申请新节点：Ⅳ.双向链表尾插：Ⅴ.双向链表尾删：Ⅵ.双向链表头插：Ⅶ.双向链表头删：Ⅷ.双向链表查找：Ⅸ.双向链表给定节点前插：Ⅹ.双向链表给定节点后插：ⅩⅠ.双向链表删除给定节点：ⅩⅡ.双向链表销毁：🍄三、完整接口实现代码🍄：1.List.h：2.List.c：3.test.c：🌶️四、顺序表与链表对比🌶️：1.两者差异：2.存储器层次结构（辅图）：🥬总结🥬：🛰️博客主页：✈️銮同学的干货分享基地🛰️欢迎关注：

随机推荐