Swift操作Quartz 2D進行簡單的繪圖與坐標變換的教程

2020-03-09 17:48:49

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了Swift操作Quartz 2D進行簡單的繪圖與坐標變換的教程,Quartz 2D是Core Graphics框架中的一個重要組件,經常被Mac OS或和iOS開發者用來繪圖,需要的朋友可以參考下

Quartz 2D簡介
Quartz 2D是蘋果公司開發的一個二維圖形繪制引擎，同時支持iOS和Mac系統。

它是一套基于C的API框架，提供了低級別、輕量級、高保真度的2D渲染。它能完成的工作有：

繪制圖形 : 線條/三角形/矩形/圓/弧等
繪制文字
繪制/生成圖片(圖像)
讀取/生成PDF
截圖/裁剪圖片
自定義UI控件
…

Quartz 2D進行繪圖
iOS繪圖技術主要有UIKit,Quartz 2D,Core Animation和OpenGL ES。我們平常對UIKit應該不陌生,而Quartz 2D與UIKit的一個區別是:
Quartz 2D的坐標原點在左下角,而UIKit的坐標原點在左上角。
在開始前作下準備工作:創建一個新的Cocoa Touch Class,繼承自UIView,然后去StoryBoard把view視圖關聯下新創建的類。

1.填充和描邊
重寫繪圖方法drawRect(),添加代碼:

復制代碼代碼如下:

		
		 override func drawRect(rect: CGRect) {
		     //填充背景
		     UIColor.brownColor().setFill()
		     //填充矩形
		     UIRectFill(rect)
		     UIColor.whiteColor().setStroke()
		     //矩形描邊
		     let frame = CGRectMake(10, 24, 100, 300)
		     UIRectFrame(frame)
		}

運行效果:

Swift,Quartz 2D

2.繪制三角形
確定三個點就能繪制出三角形,當然其他的圖形(如矩形)也是類似。
在drawRect()里添加代碼:

復制代碼代碼如下:

		
		override func drawRect(rect: CGRect) {
		    let context = UIGraphicsGetCurrentContext()
		    //繪制起始點
		    CGContextMoveToPoint(context, 120, 104)
		    //從起始點到這一點
		    CGContextAddLineToPoint(context, 150, 204)
		    CGContextAddLineToPoint(context, 200, 104)
		    //閉合路徑
		    CGContextClosePath(context)
		    UIColor.blackColor().setStroke()
		    UIColor.greenColor().setFill()
		    //繪制路徑
		    CGContextDrawPath(context, CGPathDrawingMode.FillStroke)
		}

運行效果:

Swift,Quartz 2D

依此類推,大家可以試試怎么去畫長方形,正方形和不規則多邊形。

3.繪制圖片和文字
首先準備一張圖片放入工程中,注意不要放在Assets.xcassets文件夾下,因為這里尋找的路徑是在工程文件夾。而如果把圖片放在Assets.xcassets文件夾下,就要使用另外的一種方法。
在drawRect()里添加代碼:

復制代碼代碼如下:

override func drawRect(rect: CGRect) {
    //繪制圖片和文字
    //這種方式添加圖片需要把圖片放到根目錄下,而不是Assets.xcassets下
    let imagePath = NSBundle.mainBundle().pathForResource("頭像004", ofType: "jpg")
    let image = UIImage(contentsOfFile: imagePath!)
    //具體位置根據你的圖片來調整
    image?.drawInRect(CGRectMake(100,100, 200, 200))
    let src="/uploads/allimg/160425/1A64G546-2.jpg?2016318141042" style="border: 1px solid rgb(204, 204, 204); border-image-source: none; vertical-align: bottom; padding: 1px; overflow: hidden; max-width: 650px;" />

Quartz 2D中的坐標變換
注意：坐標變換操作必須要在添加圖形之前，如果設置在添加圖形之后的話會無效。

我們先畫一個正方形做完參考：

復制代碼代碼如下:

		
		override func drawRect(rect: CGRect) {
		    let context = UIGraphicsGetCurrentContext()
		    CGContextSetLineWidth(context, 2.0)
		    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)
		    let rectangle = CGRectMake(125, 50, 50, 50)
		    CGContextAddRect(context, rectangle)
		    CGContextStrokePath(context)
		}

Swift,Quartz 2D

1、平移
func CGContextTranslateCTM(c: CGContext?, _ tx: CGFloat, _ ty: CGFloat)
該方法相當于把原來位于 (0, 0) 位置的坐標原點平移到 (tx, ty) 點。在平移后的坐標系統上繪制圖形時，所有坐標點的 X 坐標都相當于增加了 tx，所有點的 Y 坐標都相當于增加了 ty。

復制代碼代碼如下:

		
		override func drawRect(rect: CGRect) {
		    let context = UIGraphicsGetCurrentContext()
		    CGContextSetLineWidth(context, 2.0)
		    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)
		    CGContextTranslateCTM(context, -50, 25) // 向左向下平移
		    let rectangle = CGRectMake(125, 50, 50, 50) 
		    CGContextAddRect(context, rectangle)
		    CGContextStrokePath(context)
		}

Swift,Quartz 2D

2、縮放
func CGContextScaleCTM(c: CGContext?, _ sx: CGFloat, _ sy: CGFloat)
該方法控制坐標系統在水平方向和垂直方向上進行縮放。在縮放后的坐標系統上繪制圖形時，所有點的 X 坐標都相當于乘以 sx 因子，所有點的 Y 坐標都相當于乘以 sy 因子。

復制代碼代碼如下:

		
		override func drawRect(rect: CGRect) {
		    let context = UIGraphicsGetCurrentContext()
		    CGContextSetLineWidth(context, 2.0)
		    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)    
		    CGContextScaleCTM(context, 0.5, 1)
		    let rectangle = CGRectMake(125, 50, 50, 50)
		    CGContextAddRect(context, rectangle)
		    CGContextStrokePath(context)
		}

Swift,Quartz 2D

3、旋轉
func CGContextRotateCTM(c: CGContext?, _ angle: CGFloat)
該方法控制坐標系統旋轉 angle 弧度。在縮放后的坐標系統上繪制圖形時，所有坐標點的 X、Y 坐標都相當于旋轉了 angle弧度之后的坐標。

復制代碼代碼如下:

		
		override func drawRect(rect: CGRect) {
		    let context = UIGraphicsGetCurrentContext()
		    CGContextSetLineWidth(context, 2.0)
		    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)
		    CGContextRotateCTM(context, CGFloat(M_PI_4))
		    let rectangle = CGRectMake(125, 50, 50, 50)
		    CGContextAddRect(context, rectangle)
		    CGContextStrokePath(context)
		}

Swift,Quartz 2D

注意：旋轉的時候，是整個 layer 都旋轉了，所以 layer 看起來應該是這樣的：

Swift,Quartz 2D

這個時候若想移動 view ，就應該按照這個旋轉過的坐標系來移動：

復制代碼代碼如下:

		
		override func drawRect(rect: CGRect) {
		    let context = UIGraphicsGetCurrentContext()
		    CGContextSetLineWidth(context, 2.0)
		    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)
		    CGContextRotateCTM(context, CGFloat(M_PI_4))
		    CGContextTranslateCTM(context, 0, -100) // 在新坐標系中向上移動100點，視圖上看起來像是向右向上都移動了
		    let rectangle = CGRectMake(125, 50, 50, 50)
		    CGContextAddRect(context, rectangle)
		    CGContextStrokePath(context)
		}

Swift,Quartz 2D