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.jpg2.绘制三角形
确定三个点就能绘制出三角形,当然其他的图形(如矩形)也是类似。
在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.jpg4.坐标变换
在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度。其中负数表示顺时针旋转,正数表示逆时针旋转。
网友评论