Quartz 2D编程指南(5) - 变换(Transforms)

╰半橙微兮° 2022-07-13 21:11 189阅读 0赞

Quartz 2D 绘制模型定义了两种独立的坐标空间：用户空间(用于表现文档页)和设备空间(用于表现设备的本地分辨率)。用户坐标空间用浮点数表示坐标，与设备空间的像素分辨率没有关系。当我们需要一个点或者显示文档时， Quartz会将用户空间坐标系统映射到设备空间坐标系统。因此，我们不需要重写应用程序或添加额外的代码来调整应用程序的输出以适应不同的设备。

我们可以通过操作CTM(current transformation matrix)来修改默认的用户空间。在创建图形上下文后，CTM是单位矩阵，我们可以使用 Quartz的变换函数来修改CTM，从而修改用户空间中的绘制操作。

本章内容包括：

*  变换操作函数概览
 *  如何修改CTM
 *  如何创建一个仿射变换
 *  如何选择两个相同的变换
 *  如何获取user-to-device-space变换

**Quartz变换函数**

我们可能使用Quartz内置的变换函数方便的平移、旋转和缩放我们的绘图。只需要短短几行代码，我们便可以按顺序应用变换或结合使用变换。图5-1显示了缩放和旋转一幅图片的效果。我们使用的每个变换操作都更新了CTM。CTM总是用于表示用户空间和设备空间的当前映射关系。这种映射确保了应用程序的输出在任何显示器或打印机上看上去都很棒。

![0_1319443707GU2v.gif][]

Quartz 2D API提供了5个函数，以允许我们获取和修改CTM。我们可以旋转、平移、缩放CTM。我们还可以联结一个仿射变换矩阵。

有时我们可以不想操作用户空间，直到我们决定将变换应用到CTM时，Quartz为此允许我们创建应用于此的仿射矩阵。我们可以使用另外一组函数来创建仿射变换，这些变换可以与CTM联结在一起。

我们可以不需要了解矩阵的数学含义而使用这些函数。

**修改CTM**

我们在绘制图像前操作CTM来旋转、缩放或平移page,从而变换我们将要绘制的对象。以变换CTM之前，我们需要保存图形状态，以便绘制后能恢复。我们同样能用仿射矩阵来联结CTM。在本节中，我们将介绍与CTM函数相关的四种操作--平移、旋转、缩放和联结。

假设我们提供了一个可用的图形上下文、一个指向可绘制图像的矩形的指针和一个可用的CGImage对象，则下面一行代码绘制了一个图像。该行代码可以绘制如图5-2所示的图片。在阅读了本节余下的部分后，我们将看到如何将变换应用于图像。

**\[cpp\]** [view plain][] [copy][view plain]

1.  CGContextDrawImage (myContext, rect, myImage);

![0_1319443713c5R6.gif][]

平移变换根据我们指定的x, y轴的值移动坐标系统的原点。我们通过调用CGContextTranslateCTM函数来修改每个点的x, y坐标值。如图5-3显示了一幅图片沿x轴移动了100个单位，沿y轴移动了50个单位。具体代码如下：

**\[cpp\]** [view plain][] [copy][view plain]

1.  CGContextTranslateCTM (myContext, 100, 50);

![0_1319443718lb9s.gif][]

旋转变换根据指定的角度来移动坐标空间。我们调用CGContextRotateCTM函数来指定旋转角度(以弧度为单位)。图5-4显示了图片以原点(左下角)为中心旋转45度，代码所下所示：

**\[cpp\]** [view plain][] [copy][view plain]

1.  CGContextRotateCTM (myContext, radians(–45.));

![0_1319443726rr7Y.gif][]

由于旋转操作使图片的部分区域置于上下文之外，所以区域外的部分被裁减。我们用弧度来指定旋转角度。如果需要进行旋转操作，下面的代码将会很有用

**\[cpp\]** [view plain][] [copy][view plain]

1.  \#include <math.h>
2.  **static****inline****double** radians (**double** degrees) \{ **return** degrees \* M\_PI/180;\}

缩放操作根据指定的x, y因子来改变坐标空间的大小，从而放大或缩小图像。x, y因子的大小决定了新的坐标空间是否比原始坐标空间大或者小。另外，通过指定x因子为负数，可以倒转x轴，同样可以指定y因子为负数来倒转y轴。通过调用CGContextScaleCTM函数来指定x, y缩放因子。图5-5显示了指定x因子为0.5，y因子为0.75后的缩放效果。代码如下：

**\[cpp\]** [view plain][] [copy][view plain]

1.  CGContextScaleCTM (myContext, .5, .75);

![0_1319443731lzXS.gif][]

联合变换将两个矩阵相乘来联接现价变换操作。我们可以联接多个矩阵来得到一个包含所有矩阵累积效果矩阵。通过调用CGContextConcatCTM来联接CTM和仿射矩阵。

另外一种得到累积效果的方式是执行两个或多个变换操作而不恢复图形状态。图5-6显示了先平移后旋转一幅图片的效果，代码如下：

**\[cpp\]** [view plain][] [copy][view plain]

1.  CGContextTranslateCTM (myContext, w,h); 
2.  CGContextRotateCTM (myContext, radians(-180.));

![0_1319443738XG2t.gif][]

图5-7显示了平移、缩放和旋转一幅图片，代码如下：

**\[cpp\]** [view plain][] [copy][view plain]

1.  CGContextTranslateCTM (myContext, w/4, 0); 
2.  CGContextScaleCTM (myContext, .25, .5); 
3.  CGContextRotateCTM (myContext, radians ( 22.));

![0_131944374548O5.gif][]

变换操作的顺序会影响到最终的效果。如果调换顺序，将得到不同的结果。调换上面代码的顺序将得到如图5-8所示的效果，代码如下：

**\[cpp\]** [view plain][] [copy][view plain]

1.  CGContextRotateCTM (myContext, radians ( 22.)); 
2.  CGContextScaleCTM (myContext, .25, .5); 
3.  CGContextTranslateCTM (myContext, w/4, 0);

![0_1319443752MmH6.gif][]

**创建仿射变换**

仿射变换操作在矩阵上，而不是在CTM上。我们可以使用这些函数来构造一个之后用于CTM(调用函数CGContextConcatCTM)的矩阵。仿射变换函数使用或者返回一个CGAffineTransform数据对象。我们可以构建简单或复杂的仿射变换。

仿射变换函数能实现与CTM函数相同的操作--平移、旋转、缩放、联合。表5-1列出了仿射变换函数及其用途。注意每种变换都有两个函数。

表5-1 仿射变换函数

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span><strong>函数</strong></span></p> </td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span><strong>用途</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>CGAffineTransformMakeTranslation</span></p> </td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>通过指定</span><span>x, y</span><span>值来创建一个平移矩阵</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>CGAffineTransformTranslate</span></p> </td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>在已存在的矩阵中使用平移</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>CGAffineTransformMakeRotation</span></p> </td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>通过指定角度来创建一个旋转矩阵</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>CGAffineTransformRotate</span></p> </td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>在已存在的矩阵中使用旋转</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>CGAffineTransformMakeScale</span></p> </td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>通过指定</span><span>x, y</span><span>缩放因子来创建一个缩放矩阵</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>CGAffineTransformScale</span></p> </td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>在已存在的矩阵中使用缩放</span></p> </td> 
  </tr> 
 </tbody> 
</table>

Quartz同样提供了一个仿射变换函数(CGAffineTransformInvert)来倒置矩阵。倒置操作通常用于在变换对象中提供点的倒置变换。当我们需要恢复一个被矩阵变换的值时，可以使用倒置操作。将值与倒置矩阵相乘，就可得到原先的值。我们通常不需要倒置操作，因为我们可以通过保存和恢复图形状态来倒置CTM的效果。

在一些情况下，我们可能不需要变换整修空间，而只是一个点或一个大小。我们通过调用CGPointApplyAffineTransform在CGPoint结构上执行变换操作。调用CGSizeApplyAffineTransform在CGSize结构上执行变换操作。调用CGRectApplyAffineTransform在CGRect结构上执行变换操作。CGRectApplyAffineTransform返回一个最小的矩形，该矩形包含了被传递给CGRectApplyAffineTransform的矩形对象的角点。如果矩形上的仿射变换操作只有缩放和平移操作，则返回的矩形与四个变换后的角组成的矩形是一致的。

可以通过调用函数CGAffineTransformMake来创建一个新的仿射变换，但与其它函数不同的是，它需要提供一个矩阵实体。

**评价仿射变换**

我们可以通过调用CGAffineTransformEqualToTransform函数来决定一个仿射变换是否与另一个相同。如果两个变换相同，则返回true；否则返回false。

函数CGAffineTransformIsIdentity用于确认一个变换是否是单位变换。单位变换没有平移、缩放和旋转操作。Quartz常量CGAffineTransformIdentity表示一个单位变换。

获取用户空间到设备空间的变换

当使用Quartz 2D时，我们只是在用户空间下工作。Quartz为我们处理用户空间和设备空间的转换。如果我们的应用程序需要获取Quartz转换用户空间和设备空间的仿射变换，我们可以调用函数CGContextGetUserSpaceToDeviceSpaceTransform。

Quartz提供了一系列的函数来转换用户空间和设备空间的几何体。我们会发现这些函数使用赶来比使用CGContextGetUserSpaceToDeviceSpaceTransform函数返回的仿射变换更好用。

*  点：函数CGContextConvertPointToDeviceSpace和CGContextConvertPointToUserSpace将一个CGPoint数据结构从一个空间变换到另一个空间。
 *  大小：函数CGContextConvertSizeToDeviceSpace和CGContextConvertSizeToUserSpace将一个CGSize数据结构从一个空间变换到另一个空间。
 *  矩形：函数CGContextConvertRectToDeviceSpace和CGContextConvertRectToUserSpace将一个CGPoint数据结构从一个空间变换到另一个空间。

声明：  
1. 英文水平有限，如有翻译不当之处，请大家指出。小弟这厢有礼，定当积极改正，先谢谢了！  
2. 欢迎大家分享。分享时请注明出处，谢谢！

[0_1319443707GU2v.gif]: /images/20220714/6300966cc3094e00aa9f5e71b38eac58.png
[view plain]: http://blog.csdn.net/stanley1984_21/article/details/6900954#
[0_1319443713c5R6.gif]: /images/20220714/d299f7799b8a4998b98c17ec46f76a06.png
[0_1319443718lb9s.gif]: /images/20220714/c74e13a108674b66bdfb78e1f6cb9fa5.png
[0_1319443726rr7Y.gif]: /images/20220714/a8cafb64f4bd466ab5287dd854b3539b.png
[0_1319443731lzXS.gif]: /images/20220714/610e9e3bd9994b09a0f9ff4c74c59b22.png
[0_1319443738XG2t.gif]: /images/20220714/9b0f3244774b4fb5add3d732be80b9c5.png
[0_131944374548O5.gif]: /images/20220714/714f27d1dd274ddbb033d8a4fd083b01.png
[0_1319443752MmH6.gif]: /images/20220714/f20f48c89cba4f18a8ef2419ab22a7c0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，189人围观）

还没有评论，来说两句吧...

相关阅读

相关挑战 transform() 2D

讲在先：今天只讲 2D 的部分~~~transform()transform-origin()

我会带着你远行/ 2024年05月24日 03:57/ 0 赞/ 73 阅读

相关 CSS3-transform 2D转换

文章目录缩放 scaleX(x) scaleY(y)

矫情吗；*/ 2023年07月03日 02:39/ 0 赞/ 20 阅读

相关 iOS 《Quartz 2D编程指南》之【图片裁剪】(包含完整demo源码) :

文章目录前言 I、知识储备 1.1 核心步骤 II、例子 2.1 代码 2.2 用法 2.3 de

太过爱你忘了你带给我的痛/ 2023年01月11日 01:24/ 0 赞/ 101 阅读

相关 iOS 《Quartz 2D编程指南》之【图片水印】(包含完整demo源码)

文章目录前言 I、知识储备 1.1 核心步骤 II、例子 2.1 代码 2.2 用法 2.3 de

傷城~/ 2023年01月10日 14:52/ 0 赞/ 107 阅读

相关《Quartz 2D编程指南》之【基础形状的绘制】（画三角形、圆角矩形、椭圆、扇形）

文章目录引言 I、画三角形 II、圆角矩形 III、扇形和椭圆引言 demo > [https://github.com/z

阳光穿透心脏的1/2处/ 2022年11月02日 13:13/ 0 赞/ 168 阅读

相关 CSS3 3D transform变换

一、写在前面的秋裤早在去年的去年，我就大肆介绍了[2D transform相关内容][2D transform]。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚

系统管理员/ 2022年08月02日 05:42/ 0 赞/ 270 阅读

相关 Transforming 变换操作

[`map( )`][map] — 对序列的每一项都应用一个函数来变换Observable发射的数据序列 [`flatMap( )`, `concatMap( )`

深碍√TFBOYSˉ_/ 2022年07月29日 10:34/ 0 赞/ 158 阅读

相关 Quartz 2D编程指南(5) - 变换(Transforms)

Quartz 2D 绘制模型定义了两种独立的坐标空间：用户空间(用于表现文档页)和设备空间(用于表现设备的本地分辨率)。用户坐标空间用浮点数表示坐标，与设备空间的像素分辨率没有

╰半橙微兮°/ 2022年07月13日 21:11/ 0 赞/ 190 阅读

相关 Quartz 2D学习笔记

1、UIView在调用自定义的drawRect:后，视图对象自动配置绘图环境以便代码能立即执行绘图操作。作为配置的一部分，视图对象将为当前的绘图环境创建一个Graphics C

╰半橙微兮°/ 2022年05月27日 11:22/ 0 赞/ 195 阅读

相关 7、2D变换

CSS3中的 transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（sk

深藏阁楼爱情的钟/ 2022年04月22日 09:15/ 0 赞/ 177 阅读