Swift使用Quartz 2D进行绘图

iOS绘图技术主要有UIKit,Quartz 2D,Core Animation和OpenGL ES。我们平常对UIKit应该不陌生,而Quartz 2D与UIKit的一个区别是:
Quartz 2D的坐标原点在左下角,而UIKit的坐标原点在左上角。
在开始前作下准备工作:创建一个新的Cocoa Touch Class,继承自UIView,然后去StoryBoard把view视图关联下新创建的类。

测试环境:Xcode7.0.1
如果在Xcode最新版本不能运行,请第一时间在本文底下留言!

1.填充和描边

重写绘图方法drawRect(),添加代码:

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

运行效果:

1.jpg

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

运行效果:

2.jpg

依此类推,大家可以试试怎么去画长方形,正方形和不规则多边形。

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

运行效果:

3.jpg

4.坐标变换

在drawRect()里添加代码:

override func drawRect(rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()
    let path = NSBundle.mainBundle().pathForResource("头像004", ofType: "jpg")
    let img = UIImage(contentsOfFile: path!)
    let image = img?.CGImage
    //保存当前场景
    CGContextSaveGState(context)
    //1
    //具体位置根据你的图片来调整
    let touchRect = CGRectMake(50, 150, img!.size.width, img!.size.height)
    CGContextDrawImage(context, touchRect, image)
    //取出保存的场景
    CGContextRestoreGState(context)
}

运行效果:

4.jpg

为什么图片是反的呢？还记得Quartz 2D与UIKit的坐标系区别吧。
要想让它正常需要使用坐标变换:
基于上述代码,在drawRect()里的注释1处下方添加代码:

//平移变换
CGContextTranslateCTM(context, 120, 300)
//缩放变换,-1表示关于y轴对称
CGContextScaleCTM(context, 1,-1)

再运行下试试
除了以上变换,还有一个旋转变换CGContextRotateCTM(),
在缩放变换下方添加代码:

//旋转变换
CGContextRotateCTM(context, CGFloat(-20*M_PI/180))

该代码把图像顺时针旋转20度。其中负数表示顺时针旋转，正数表示逆时针旋转。