Swift操作Quartz 2D進(jìn)行簡單的繪圖與坐標(biāo)變換的教程
Quartz 2D簡介
Quartz 2D是蘋果公司開發(fā)的一個二維圖形繪制引擎，同時支持iOS和Mac系統(tǒng)。
它是一套基于C的API框架，提供了低級別、輕量級、高保真度的2D渲染。它能完成的工作有：
- 繪制圖形 : 線條\三角形\矩形\圓\弧等
- 繪制文字
- 繪制\生成圖片(圖像)
- 讀取\生成PDF
- 截圖\裁剪圖片
- 自定義UI控件
- …
Quartz 2D進(jìn)行繪圖
iOS繪圖技術(shù)主要有UIKit,Quartz 2D,Core Animation和OpenGL ES。我們平常對UIKit應(yīng)該不陌生,而Quartz 2D與UIKit的一個區(qū)別是:
Quartz 2D的坐標(biāo)原點在左下角,而UIKit的坐標(biāo)原點在左上角。
在開始前作下準(zhǔn)備工作:創(chuàng)建一個新的Cocoa Touch Class,繼承自UIView,然后去StoryBoard把view視圖關(guān)聯(lián)下新創(chuàng)建的類。
1.填充和描邊
重寫繪圖方法drawRect(),添加代碼:
override func drawRect(rect: CGRect) {
//填充背景
UIColor.brownColor().setFill()
//填充矩形
UIRectFill(rect)
UIColor.whiteColor().setStroke()
//矩形描邊
let frame = CGRectMake(10, 24, 100, 300)
UIRectFrame(frame)
}
運行效果:
2.繪制三角形
確定三個點就能繪制出三角形,當(dāng)然其他的圖形(如矩形)也是類似。
在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)
}
運行效果:
依此類推,大家可以試試怎么去畫長方形,正方形和不規(guī)則多邊形。
3.繪制圖片和文字
首先準(zhǔn)備一張圖片放入工程中,注意不要放在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!)
//具體位置根據(jù)你的圖片來調(diào)整
image?.drawInRect(CGRectMake(100,100, 200, 200))
let title = "頭像"
let font = UIFont.systemFontOfSize(44)
let attr = [NSFontAttributeName:font]
title.drawAtPoint(CGPointMake(100, 20), withAttributes: attr)
}
運行效果:
Quartz 2D中的坐標(biāo)變換
注意：坐標(biāo)變換操作必須要在添加圖形之前，如果設(shè)置在添加圖形之后的話會無效。
我們先畫一個正方形做完參考：
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)
}
1、平移
func CGContextTranslateCTM(c: CGContext?, _ tx: CGFloat, _ ty: CGFloat)
該方法相當(dāng)于把原來位于 (0, 0) 位置的坐標(biāo)原點平移到 (tx, ty) 點。在平移后的坐標(biāo)系統(tǒng)上繪制圖形時，所有坐標(biāo)點的 X 坐標(biāo)都相當(dāng)于增加了 tx，所有點的 Y 坐標(biāo)都相當(dāng)于增加了 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)
}
2、縮放
func CGContextScaleCTM(c: CGContext?, _ sx: CGFloat, _ sy: CGFloat)
該方法控制坐標(biāo)系統(tǒng)在水平方向和垂直方向上進(jìn)行縮放。在縮放后的坐標(biāo)系統(tǒng)上繪制圖形時，所有點的 X 坐標(biāo)都相當(dāng)于乘以 sx 因子，所有點的 Y 坐標(biāo)都相當(dāng)于乘以 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)
}
3、旋轉(zhuǎn)
func CGContextRotateCTM(c: CGContext?, _ angle: CGFloat)
該方法控制坐標(biāo)系統(tǒng)旋轉(zhuǎn) angle 弧度。在縮放后的坐標(biāo)系統(tǒng)上繪制圖形時，所有坐標(biāo)點的 X、Y 坐標(biāo)都相當(dāng)于旋轉(zhuǎn)了 angle弧度之后的坐標(biāo)。
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)
}
注意：旋轉(zhuǎn)的時候，是整個 layer 都旋轉(zhuǎn)了，所以 layer 看起來應(yīng)該是這樣的：
這個時候若想移動 view ，就應(yīng)該按照這個旋轉(zhuǎn)過的坐標(biāo)系來移動：
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) // 在新坐標(biāo)系中向上移動100點，視圖上看起來像是向右向上都移動了
let rectangle = CGRectMake(125, 50, 50, 50)
CGContextAddRect(context, rectangle)
CGContextStrokePath(context)
}
相關(guān)文章
Swift的函數(shù)在創(chuàng)建和調(diào)用時非常簡潔,在編寫具有閉包特性的函數(shù)時同樣也相當(dāng)方便,以下我們就來詳解Swift中的函數(shù)及函數(shù)閉包使用:2016-06-06
swift版webview加載網(wǎng)頁進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了swift實現(xiàn)webview加載網(wǎng)頁進(jìn)度條效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Swift下使用UICollectionView 實現(xiàn)長按拖拽功能
拖拽排序是新聞類的App可以說是必有的交互設(shè)計，如今日頭條，網(wǎng)易新聞等。這篇文章主要介紹了Swift下使用UICollectionView 長按拖拽功能,需要的朋友可以參考下2017-03-03
Swift中通知中心(NotificationCenter)的使用示例
這篇文章主要給大家介紹了關(guān)于Swift中通知中心(NotificationCenter)使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
這篇文章主要給大家介紹了關(guān)于Swift如何為網(wǎng)頁承載頁面添加更多功能的相關(guān)資料，包括添加菊花加載的效果、添加跳轉(zhuǎn)到Safari的功能、添加復(fù)制鏈接的功能以及添加分享網(wǎng)頁的功能，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Swift data范圍截取問題解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
用SwiftUI實現(xiàn)3D Scroll滾動效果的實現(xiàn)代碼
這篇文章主要介紹了用SwiftUI實現(xiàn)3D Scroll效果的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2020-04-04
這篇文章主要為大家詳細(xì)介紹了Swift實現(xiàn)簡單計算器項目，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Swift利用Decodable解析JSON的一個小問題詳解
這篇文章主要給大家介紹了關(guān)于Swift利用Decodable解析JSON的一個小問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
今天在網(wǎng)上看到一篇非常好的Swift 編程語言入門教程，分享給大家2014-08-08