服务器之家

服务器之家 > 正文

Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

时间:2020-12-25 16:01     来源/作者:老初

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


运行效果:

Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

 

2.绘制三角形
确定三个点就能绘制出三角形,当然其他的图形(如矩形)也是类似。
在drawRect()里添加代码:

  1. override func drawRect(rect: CGRect) { 
  2.     let context = UIGraphicsGetCurrentContext() 
  3.     //绘制起始点 
  4.     CGContextMoveToPoint(context, 120, 104) 
  5.     //从起始点到这一点 
  6.     CGContextAddLineToPoint(context, 150, 204) 
  7.     CGContextAddLineToPoint(context, 200, 104) 
  8.     //闭合路径 
  9.     CGContextClosePath(context) 
  10.     UIColor.blackColor().setStroke() 
  11.     UIColor.greenColor().setFill() 
  12.     //绘制路径 
  13.     CGContextDrawPath(context, CGPathDrawingMode.FillStroke) 

运行效果:

Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

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

3.绘制图片和文字
首先准备一张图片放入工程中,注意不要放在Assets.xcassets文件夹下,因为这里寻找的路径是在工程文件夹。而如果把图片放在Assets.xcassets文件夹下,就要使用另外的一种方法。
在drawRect()里添加代码:

  1. override func drawRect(rect: CGRect) { 
  2.     //绘制图片和文字 
  3.     //这种方式添加图片需要把图片放到根目录下,而不是Assets.xcassets下 
  4.     let imagePath = NSBundle.mainBundle().pathForResource("头像004", ofType: "jpg"
  5.     let image = UIImage(contentsOfFile: imagePath!) 
  6.     //具体位置根据你的图片来调整 
  7.     image?.drawInRect(CGRectMake(100,100, 200, 200)) 
  8.     let title = "头像" 
  9.     let font = UIFont.systemFontOfSize(44) 
  10.     let attr = [NSFontAttributeName:font] 
  11.     title.drawAtPoint(CGPointMake(100, 20), withAttributes: attr) 

运行效果:

Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

 


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

 

Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

 

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

 

Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

 

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

 

Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

 

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

 

Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

注意:旋转的时候,是整个 layer 都旋转了,所以 layer 看起来应该是这样的:

Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

这个时候若想移动 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)
}

 

Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址 2020-08-12
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
返回顶部