最近在看《iOS 6 Programming Cookbook》的翻譯版,它由DevDiv論壇的網友翻譯,原文地址:點擊跳轉。由于下載的pdf都有水印,并且排版不是很好,特別是代碼排版,基本不能看,所以這里就整理了一下,方便再次查看。另外把里面提到的點寫了一個demo,由于里面一些代碼現在已經廢棄,所以demo中都是用的新api,下載地址在這里:圖形與動畫Demo。
1.10 移動圖形環境上所繪制的形狀
你想移動被繪制到圖形環境上的一切,到一個新的位置,而不需要修改你的繪圖代碼。或者你只是想輕易的移動你的圖形環境。
使用 CGAffineTransformMakeTranslation
函數創建一個仿射位移變換(`affine translation transformation)。
變換。顧名思義:就是改變圖形顯示的方式。變換在core graphics中是圖形在繪制前被應用的一些對象。比如,你可以創建一個位移變換。移動什么,你可能會問?一個位移變換是一種讓你能移動形狀或圖形環境的機制。
其他類型的變換包含旋轉和縮放這些都是仿射變換的例子,仿射變換會在最終版本中將原來的每個點映射到另一個點。
位移變換能將路徑或圖形環境上的形狀的當前位置移動到另一個相對的位置。比如說, 你在(10,20)畫了一個點,對其使用了(30,40)的仿射變換,然后再畫它,這個點會被 畫到(40,60),因為 10+30 的和為 40,20+40 的和為 60。
為了創建一個新的位移變換,我們必須使用 CGAffineTransformMakeTranslation
函數, 它會返回一個 CGAffineTransform
類型的仿射變換。此函數的兩個參數指定了以點為單位的 x 和 y 方向上的位移。
在 1.7 小節中,我們看見了 CGPathAddRect
過程的第二個參數是一個 CGAffineTransform
類型的變換對象。為了從原始位置向另一個位置移動矩形,你只要創建 一個放射變換,并指定你希望的 x 和 y 軸的位移,并將變換作為第二個參數傳入 CGPathAddRect
,如下:
- (void)drawRect:(CGRect)rect
{
//創建一個新的 CGMutablePathRef 類型的可變路徑
CGMutablePathRef path = CGPathCreateMutable();
CGRect rectrangle = CGRectMake(10.0, 70, 200, 300);
CGAffineTransform transform = CGAffineTransformMakeTranslation(100, 0);
//向路徑添加一個矩形
CGPathAddRect(path, &transform, rectrangle);
//獲取當前圖形上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
//向圖形環境上添加一個路徑
CGContextAddPath(currentContext, path);
UIColor *color = [UIColor colorWithRed:0.20f
green:0.60f
blue:0.80f
alpha:1.0f];
//設置填充顏色為淺藍色
[color setFill];
//將筆觸顏色設置為棕色
[[UIColor brownColor] setStroke];
//設置線的寬度
CGContextSetLineWidth(currentContext, 5.0);
//在圖形上下文繪制路徑
CGContextDrawPath(currentContext, kCGPathFillStroke);
//釋放路徑所分配的內存
CGPathRelease(path);
}
效果如下:
比較圖 7-1(圖形與動畫(二))) 和圖10-1 .你能發現不同點嗎?檢查這兩個圖形的代碼,你會發現每個代碼塊中的矩形所指定的 x 和 y 點是相同的。只不過在圖 10-1 中,我們在將矩形加到路徑中時,對矩形應用了仿射位移變換。
除了向繪制到路徑中的形狀應用變換之外,我們還可以使用 CGContextTranslateCTM
過程對圖形環境應用變換。這會在當前變換矩陣(CTM)上應用位移變換。當前的變換矩陣,雖然聽起來很復雜,其實很容易理解。你可以將 CTM 當作你的圖形環境的中心如何被設置,而你繪制的每個點又是如何投射到屏幕上的工具。比如說,當你要求core graphics
在(0,0)點繪圖時,core graphics
查看CTM來得到屏幕的中心。CTM會做一些計算然后告訴 core graphics
(0,0)這點確實是在屏幕的左上角。使用如 CGContextTranslateCTM
這樣的過程函數,你可以修改 CTM 的配置,從而改變圖形環境上的每個形狀,使他們繪制到畫布上的另一個位置。下面的例子中,我們能通過對 CTM 應用位移變換而不是直接對矩形操作,而得到和圖 10-1 完全相同的屏幕:
- (void)drawRect:(CGRect)rect
{
/* Create the path first. Just the path handle. */
CGMutablePathRef path = CGPathCreateMutable();
/* Here are the rectangle boundaries */
CGRect rectangle = CGRectMake(10.0f, 10.0f, 200.0f, 300.0f);
/* Add the rectangle to the path */
CGPathAddRect(path, NULL, rectangle);
/* Get the handle to the current context */
CGContextRef currentContext = UIGraphicsGetCurrentContext();
/* Save the state of the context to revert
back to how it was at this state, later */
CGContextSaveGState(currentContext);
/* Translate the current transformation matrix to the right by 100 points */
CGContextTranslateCTM(currentContext, 100.0f, 0.0f);
/* Add the path to the context */
CGContextAddPath(currentContext, path);
/* Set the fill color to cornflower blue */
[[UIColor colorWithRed:0.20f
green:0.60f
blue:0.80f
alpha:1.0f] setFill];
/* Set the stroke color to brown */
[[UIColor brownColor] setStroke];
/* Set the line width (for the stroke) to 5 */
CGContextSetLineWidth(currentContext,
5.0f);
/* Stroke and fill the path on the context */
CGContextDrawPath(currentContext, kCGPathFillStroke);
/* Dispose of the path */
CGPathRelease(path);
/* Restore the state of the context */
CGContextRestoreGState(currentContext);
}
1.11 縮放繪制到圖形環境上的形狀
動態的縮放你圖形環境上的形狀。
使用 CGAffineTransformMakeScale
函數創建一個仿射縮放變換。
和1.10節類似,只需將變換方式修改為CGAffineTransformMakeScale
即可。效果圖11-1,
注意:這里x,y坐標均有縮放。
1.12 旋轉繪制在圖形環境上的形狀
要旋轉圖形環境上的內容,而不改變繪圖代碼。
使用 CGAffineTransformMakeRotation
函數來創建一個仿射旋轉變換。
將矩形旋轉45°,很簡單,和1.10節類似,只需將變換方式修改為CGAffineTransformMakeRotation
即可。效果圖12-1,