iOS開發UI篇—Quartz2D使用（矩陣操作）

一、關於矩陣操作

1.畫一個四邊形

通過設置兩個端點（長和寬）來完成一個四邊形的繪制。

代碼：

 1 - (void)drawRect:(CGRect)rect
 2 {
 3     //畫四邊形
 4     //獲取圖形上下文
 5     CGContextRef ctx=UIGraphicsGetCurrentContext();
 6     //繪圖
 7     CGContextAddRect(ctx, CGRectMake(20, 50, 100, 100));
 8     //渲染
 9     CGContextStrokePath(ctx);
10 }

說明：通過這種方式畫矩形有弱點：畫出來的矩形永遠都是正的。如下圖：

2.畫一個歪的四邊形

如何畫一個歪的矩形？（通過矩陣操作來完成，和形變操作相似）

可以通過矩陣操作，把畫出來的東西進行形變（旋轉，縮放，平移）

方法：CGContextRotateCTM(<#CGContextRef c#>, <#CGFloat angle#>)該接受兩個參數（圖形上下文，弧度）

註意點：設置矩陣操作必須要在添加圖形之前，如果設置在添加圖形之後的話，此時它已經畫完了，無效。

代碼：

 1 - (void)drawRect:(CGRect)rect
 2 {
 3     //畫四邊形
 4     //獲取圖形上下文
 5     CGContextRef ctx=UIGraphicsGetCurrentContext();
 6     //矩陣操作
 7     //註意點：設置矩陣操作必須要在添加繪圖信息之前
 8     //旋轉45度
 9     CGContextRotateCTM(ctx, M_PI_4);
10     
11     //繪圖
12     CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));
13     //渲染
14     CGContextStrokePath(ctx);
15 }

view之所以能夠顯示視圖，是因為它的上面有layer,將來圖形也是渲染到layer上面。

且，旋轉的時候是整個layer都旋轉了，可以再畫一個圓進行驗證。

代碼1（未旋轉）：

 1 - (void)drawRect:(CGRect)rect
 2 {
 3     //獲取圖形上下文
 4     CGContextRef ctx=UIGraphicsGetCurrentContext();
 5     //矩陣操作
 6     //註意點：設置矩陣操作必須要在添加繪圖信息之前
 7     //旋轉45度
 8     //    CGContextRotateCTM(ctx, M_PI_4);
 9     
10     //繪圖
11     //畫四邊形
12     CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));
13     //畫一個圓
14     CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));
15     //渲染
16     CGContextStrokePath(ctx);
17 }

效果：

代碼2(旋轉):

 1 - (void)drawRect:(CGRect)rect
 2 {
 3     //獲取圖形上下文
 4     CGContextRef ctx=UIGraphicsGetCurrentContext();
 5     //矩陣操作
 6     //註意點：設置矩陣操作必須要在添加繪圖信息之前
 7     //旋轉45度
 8     CGContextRotateCTM(ctx, M_PI_4);
 9     
10     //繪圖
11     //畫四邊形
12     CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));
13     //畫一個圓
14     CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));
15     //渲染
16     CGContextStrokePath(ctx);
17 }

效果：

2.關於旋轉的補充說明

提示：旋轉的時候，是整個layer都旋轉了。

三、縮放

方法:CGContextScaleCTM(<#CGContextRef c#>, <#CGFloat sx#>, <#CGFloat sy#>)

該方法接收三個參數（圖形上下文，x方向的縮放比例，y方向上的縮放比例

代碼示例：

 1 - (void)drawRect:(CGRect)rect
 2 {
 3     //獲取圖形上下文
 4     CGContextRef ctx=UIGraphicsGetCurrentContext();
 5     //矩陣操作
 6     //註意點：設置矩陣操作必須要在添加繪圖信息之前
 7     //縮放，x方向縮放0.5倍，y方向縮放1.5倍
 8     CGContextScaleCTM(ctx, 0.5, 1.5);
 9     
10     //繪圖
11     //畫四邊形
12     CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));
13     //畫一個圓
14     CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));
15     //渲染
16     CGContextStrokePath(ctx);
17 }

效果：

四、平移

方法： CGContextTranslateCTM(<#CGContextRef c#>, <#CGFloat tx#>, <#CGFloat ty#>)

該方法接收三個參數（圖形上下文，x方向的偏移量，y方向上的偏移量）

代碼示例：

 1 - (void)drawRect:(CGRect)rect
 2 {
 3     //獲取圖形上下文
 4     CGContextRef ctx=UIGraphicsGetCurrentContext();
 5     //矩陣操作
 6     //註意點：設置矩陣操作必須要在添加繪圖信息之前
 7     //平移，x方向移動50，y方向移動100
 8     CGContextTranslateCTM(ctx, 50, 100);
 9     
10     //繪圖
11     //畫四邊形
12     CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));
13     //畫一個圓
14     CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));
15     //渲染
16     CGContextStrokePath(ctx);
17 }

效果：

提示：坐標原點為view的左上角。

iOS開發UI篇—Quartz2D使用（矩陣操作）