未完待续……

Quartz 2D 简介

Quartz 2D是苹果公司开发的一个二维图形绘制引擎，同时支持iOS和Mac系统。

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

• 绘制图形 : 线条\三角形\矩形\圆\弧等
• 绘制文字
• 绘制\生成图片(图像)
• 读取\生成PDF
• 截图\裁剪图片
• 自定义UI控件
• …

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

示例.png

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

旋转后平移