Swift操作Quartz 2D停止復雜的繪圖與坐標變換的教程。本站提示廣大學習愛好者:(Swift操作Quartz 2D停止復雜的繪圖與坐標變換的教程)文章只能為提供參考,不一定能成為您想要的結果。以下是Swift操作Quartz 2D停止復雜的繪圖與坐標變換的教程正文
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)
}
運轉效果:
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)
}
運轉效果:
依此類推,大家可以試試怎樣去畫長方形,正方形和不規則多邊形。
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 title = "頭像"
let font = UIFont.systemFontOfSize(44)
let attr = [NSFontAttributeName:font]
title.drawAtPoint(CGPointMake(100, 20), withAttributes: attr)
}
運轉效果:
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)
}
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)
}
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)
}
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)
}
留意:旋轉的時分,是整個 layer 都旋轉了,所以 layer 看起來應該是這樣的:
這個時分若想挪動 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)
}