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 }
效果：
二、關於旋轉
1.旋轉演示
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的左上角。