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

 

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

1、關於矩陣操做

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都旋轉了。

3、縮放

方法: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 }

 效果：

4、平移

方法： 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的左上角。