程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 更多關於編程 >> Swift操作Quartz 2D停止簡略的畫圖與坐標變換的教程

Swift操作Quartz 2D停止簡略的畫圖與坐標變換的教程

編輯:更多關於編程

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)
}


  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved