Quartz 2D学习笔记

╰半橙微兮° 2022-05-27 11:22 194阅读 0赞

1、UIView在调用自定义的drawRect:后，视图对象自动配置绘图环境以便代码能立即执行绘图操作。作为配置的一部分，视图对象将为当前的绘图环境创建一个Graphics Context。我们可以通过调用UIGraphicsGetCurrentContext函数来获取这个Graphics Context。

2、 应用程序使用了UIGraphicsBeginImageContextWithOptions取代Quartz低层函数。如果使用Quartz创建一个后台bitmap，bitmap Graphics Context使用的坐标系统是Quartz默认的坐标系统。而使用UIGraphicsBeginImageContextWithOptions创建图形上下文，UIKit将会对坐标系统使用与UIView对象的图形上下文一样的转换。这允许应用程序使用相同的绘制代码而不需要担心坐标系统问题。虽然我们的应用程序可以手动调整CTM达到相同的效果，但这种做没有任何好处。

3、 重要： IOS不支持设备依赖颜色空间或通用颜色空间。IOS应用程序必须使用设备颜色空间(device color space)

***设备颜色空间主要用于IOS应用程序，因为其它颜色空间无法在IOS上使用***

<table style="line-height:2em; font-size:14px; width:741px; border-top-width:1px; border-top-style:solid; border-top-color:rgb(224,224,224); border-left-width:1px; border-left-style:solid; border-left-color:rgb(224,224,224); border-collapse:collapse; outline:none; color:rgb(51,51,51); font-family:'Lucida Grande','Lucida Sans Unicode',Arial,Verdana,sans-serif"> 
 <tbody> 
  <tr style="outline-style:none; outline-width:initial; outline-color:initial"> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> <span style="color:#FF1300">更多时候我们使用CGColor对象和函数CGContextSetStrokeColorWithColor和CGContextSetFillColorWithColor。</span></td> 
  </tr> 
 </tbody> 
</table>

4、 用户空间(用于表现文档页)和设备空间(用于表现设备的本地分辨率)

变换

page：CTM

CGContextTranslateCTM (myContext, 100, 50);

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

CGContextScaleCTM (myContext, .5, .75);

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

仿射变换：

<table style="line-height:2em; font-size:14px; width:934px; border-top-width:1px; border-top-style:solid; border-top-color:rgb(224,224,224); border-left-width:1px; border-left-style:solid; border-left-color:rgb(224,224,224); border-collapse:collapse; outline:none; color:rgb(51,51,51); font-family:'Lucida Grande','Lucida Sans Unicode',Arial,Verdana,sans-serif"> 
 <tbody> 
  <tr style="outline-style:none; outline-width:initial; outline-color:initial"> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> <span style="outline-style:none; outline-width:initial; outline-color:initial">函数</span><br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> <span style="outline-style:none; outline-width:initial; outline-color:initial">用途</span><br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
  </tr> 
  <tr style="outline-style:none; outline-width:initial; outline-color:initial"> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> CGAffineTransformMakeTranslation<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> 通过指定x, y值来创建一个平移矩阵<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
  </tr> 
  <tr style="outline-style:none; outline-width:initial; outline-color:initial"> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> CGAffineTransformTranslate<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> 在已存在的矩阵中使用平移<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
  </tr> 
  <tr style="outline-style:none; outline-width:initial; outline-color:initial"> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> CGAffineTransformMakeRotation<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> 通过指定角度来创建一个旋转矩阵<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
  </tr> 
  <tr style="outline-style:none; outline-width:initial; outline-color:initial"> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> CGAffineTransformRotate<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> 在已存在的矩阵中使用旋转<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
  </tr> 
  <tr style="outline-style:none; outline-width:initial; outline-color:initial"> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> CGAffineTransformMakeScale<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> 通过指定x, y缩放因子来创建一个缩放矩阵<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
  </tr> 
  <tr style="outline-style:none; outline-width:initial; outline-color:initial"> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> CGAffineTransformScale<br style="outline-style:none; outline-width:initial; outline-color:initial"> </td> 
   <td colspan="1" style="height:20px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(224,224,224); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(224,224,224); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; word-break:break-all; word-wrap:break-word; outline-style:none; outline-width:initial; outline-color:initial"> 在已存在的矩阵中使用缩放</td> 
  </tr> 
 </tbody> 
</table>

调用CGPointApplyAffineTransform在CGPoint结构上执行变换操作。调用CGSizeApplyAffineTransform在CGSize结构上执行变换操作。调用CGRectApplyAffineTransform在CGRect结构上执行变换操作

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

**用户空间到设备空间的变换**

如果我们的应用程序需要获取 Quartz 转换用户空间和设备空间的仿射变换，我们可以调用函数CGContextGetUserSpaceToDeviceSpaceTransform。

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

5、阴影

CGContextSetShadow

CGContextSetShadowWithColor

阴影有三个属性：

*  x偏移值，用于指定阴影相对于图片在水平方向上的偏移值。
 *  y偏移值，用于指定阴影相对于图片在竖直方向上的偏移值。
 *  模糊(blur)值，用于指定图像是有一个硬边(hard edge)，还是一个漫射边(diffuse edge)

*  一个正值的x偏移量指定阴影位于图形对象的右侧。
 *  在Mac OS X中，正值的y指定阴影位于图形对象的上边，这与Quartz 2D默认的坐标值匹配。
 *  在iOS中，如果我们用Quartz 2D API来创建PDF或者位图图形上下文，则正值的y指定阴影位于图形对象的上边。
 *  在iOS中，如果图形上下文是由UIKit创建的，则正值的y指定阴影位于图形对象的下边。这与UIKit坐标系统相匹配。阴影绘制惯例不受CTM影响

绘制阴影过程   
 按照如下步骤来绘制阴影

1.  保存图形状态
2.  调用函数CGContextSetShadow，传递相应的值
3.  使用阴影绘制所有的对象
4.  恢复图形状态

按照如下步骤来绘制彩色阴影

1.  保存图形状态
2.  创建一个CGColorSpace对象，确保Quartz能正确地解析阴影颜色
3.  创建一个CGColor对象来指定阴影的颜色
4.  调用CGContextSetShadowWithColor，并传递相应的值
5.  使用阴影绘制所有的对象
6.  恢复图形状态

1.  void MyDrawWithShadows (CGContextRef myContext, float wd, float ht);
2.  \{ 
3.   CGSize myShadowOffset = CGSizeMake (-15, 20);
4.   float myColorValues\[\] = \{1, 0, 0, .6\};
5.   CGColorRef myColor;
6.   CGColorSpaceRef myColorSpace;
7.   CGContextSaveGState(myContext);
8.   CGContextSetShadow (myContext, myShadowOffset, 5); 
9.   // Your drawing code here
10.  CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
11.  CGContextFillRect (myContext, CGRectMake (wd/3 + 75, ht/2 , wd/4, ht/4));
12.  myColorSpace = CGColorSpaceCreateDeviceRGB ();
13.  myColor = CGColorCreate (myColorSpace, myColorValues);
14.  CGContextSetShadowWithColor (myContext, myShadowOffset, 5, myColor);
15.  // Your drawing code here
16.  CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
17.  CGContextFillRect (myContext, CGRectMake (wd/3-75,ht/2-100,wd/4,ht/4));
18.  CGColorRelease (myColor);
19.  CGColorSpaceRelease (myColorSpace); 
20.  CGContextRestoreGState(myContext);
21. \}

6、透明层

CGContextBeginTransparencyLayer(content, NULL);

CGContextEndTransparencyLayer();

在开始透明层操作后，我们可以绘制任何想显示在层上的对：指定上下文中的绘制操作将被当成一个组合对象绘制到一个透明背景上

即在透明层上绘制的所有部件在content中都将被视为一个整体

1.  void MyDrawTransparencyLayer (CGContext myContext, float wd,float ht)
2.  \{
3.  CGSize myShadowOffset = CGSizeMake (10, -20);
4.  CGContextSetShadow (myContext, myShadowOffset, 10);
5.  CGContextBeginTransparencyLayer (myContext, NULL);
6.  // Your drawing code here
7.  CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
8.  CGContextFillRect (myContext, CGRectMake (wd/3+ 50,ht/2 ,wd/4,ht/4));
9.  CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
10. CGContextFillRect (myContext, CGRectMake (wd/3-50,ht/2-100,wd/4,ht/4));
11. CGContextSetRGBFillColor (myContext, 1, 0, 0, 1);
12. CGContextFillRect (myContext, CGRectMake (wd/3,ht/2-50,wd/4,ht/4));
13. CGContextEndTransparencyLayer (myContext);
14. \}
15.