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

標籤：

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

一、關於矩陣操作 1.畫一個四邊形通過設定兩個端點（長和寬）來完成一個四邊形的繪製。代碼：

- (void)drawRect:(CGRect)rect{    //畫四邊形    //擷取圖形上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //繪圖    CGContextAddRect(ctx, CGRectMake(20, 50, 100, 100));    //渲染    CGContextStrokePath(ctx);}

 

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

 

2.畫一個歪的四邊形如何畫一個歪的矩形？（通過矩陣操作來完成，和形變操作相似）可以通過矩陣操作，把畫出來的東西進行形變（旋轉，縮放，平移）方法：CGContextRotateCTM(<#CGContextRef c#>, <#CGFloat angle#>)該接受兩個參數（圖形上下文，弧度）注意點：設定矩陣操作必須要在添加圖形之前，如果設定在添加圖形之後的話，此時它已經畫完了，無效。代碼：

- (void)drawRect:(CGRect)rect{    //畫四邊形    //擷取圖形上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //矩陣操作    //注意點：設定矩陣操作必須要在添加繪圖資訊之前    //旋轉45度    CGContextRotateCTM(ctx, M_PI_4);        //繪圖    CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));    //渲染    CGContextStrokePath(ctx);}

　　效果：

 

二、關於旋轉1.旋轉示範view之所以能夠顯示視圖，是因為它的上面有layer,將來圖形也是渲染到layer上面。且，旋轉的時候是整個layer都旋轉了，可以再畫一個圓進行驗證。代碼1（未旋轉）：

- (void)drawRect:(CGRect)rect{    //擷取圖形上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //矩陣操作    //注意點：設定矩陣操作必須要在添加繪圖資訊之前    //旋轉45度    //    CGContextRotateCTM(ctx, M_PI_4);        //繪圖    //畫四邊形    CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));    //畫一個圓    CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));    //渲染    CGContextStrokePath(ctx);}

 效果：

 

代碼2(旋轉):

- (void)drawRect:(CGRect)rect{    //擷取圖形上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //矩陣操作    //注意點：設定矩陣操作必須要在添加繪圖資訊之前    //旋轉45度    CGContextRotateCTM(ctx, M_PI_4);        //繪圖    //畫四邊形    CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));    //畫一個圓    CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));    //渲染    CGContextStrokePath(ctx);}

效果：

 

2.關於旋轉的補充說明提示：旋轉的時候，是整個layer都旋轉了。三、縮放方法:CGContextScaleCTM(<#CGContextRef c#>, <#CGFloat sx#>, <#CGFloat sy#>)該方法接收三個參數（圖形上下文，x方向的縮放比例，y方向上的縮放比例程式碼範例：

- (void)drawRect:(CGRect)rect{    //擷取圖形上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //矩陣操作    //注意點：設定矩陣操作必須要在添加繪圖資訊之前    //縮放，x方向縮放0.5倍，y方向縮放1.5倍    CGContextScaleCTM(ctx, 0.5, 1.5);        //繪圖    //畫四邊形    CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));    //畫一個圓    CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));    //渲染    CGContextStrokePath(ctx);}

 效果：

 

四、平移方法： CGContextTranslateCTM(<#CGContextRef c#>, <#CGFloat tx#>, <#CGFloat ty#>)該方法接收三個參數（圖形上下文，x方向的位移量，y方向上的位移量）   程式碼範例：

- (void)drawRect:(CGRect)rect{    //擷取圖形上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //矩陣操作    //注意點：設定矩陣操作必須要在添加繪圖資訊之前    //平移，x方向移動50，y方向移動100    CGContextTranslateCTM(ctx, 50, 100);        //繪圖    //畫四邊形    CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));    //畫一個圓    CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));    //渲染    CGContextStrokePath(ctx);}

效果：

 

提示：座標原點為view的左上方。

 

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