脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Swift → Swift操作Quartz 2D绘图和坐标变换

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

 更新时间：2016年04月18日 14:15:51   作者：老初  
这篇文章主要介绍了Swift操作Quartz 2D进行简单的绘图与坐标变换的教程,Quartz 2D是Core Graphics框架中的一个重要组件,经常被Mac OS或和iOS开发者用来绘图,需要的朋友可以参考下

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

运行效果:

2016418140921390.jpg (635×1178)

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

运行效果:

2016418141013117.jpg (644×1178)

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

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

运行效果:

2016418141032549.jpg (642×1185)


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

2016418141110905.png (299×299)

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

2016418141132007.png (599×297)

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

2016418141152595.png (598×297)

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

2016418141215224.png (598×299)

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

2016418141233334.png (456×380)

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

2016418141250529.png (597×298)

您可能感兴趣的文章:

相关文章

  • Swift方法调度之类的普通方法底层探究

    Swift方法调度之类的普通方法底层探究

    这篇文章主要介绍了Swift-方法调度-类的普通方法底层探究,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-11-11
  • swift中自定义正则表达式运算符=~详解

    swift中自定义正则表达式运算符=~详解

    这篇文章主要给大家介绍了关于swift中自定义正则表达式运算符=~的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • 如何利用SwiftUI实现可缩放的图片预览器

    如何利用SwiftUI实现可缩放的图片预览器

    这篇文章主要给大家介绍了关于如何利用SwiftUI实现可缩放图片预览器的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用SwiftUI具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • Swift中的常量和变量简单概述

    Swift中的常量和变量简单概述

    这篇文章主要介绍了Swift中的常量和变量简单概述的相关资料，非常具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-05-05
  • Swift项目中利用SWRevealViewController实现侧滑菜单

    Swift项目中利用SWRevealViewController实现侧滑菜单

    这篇文章主要介绍了Swift项目中利用SWRevealViewController实现侧滑菜单,需要的朋友可以参考下
    2015-12-12
  • 详解Swift的内存管理

    详解Swift的内存管理

    这篇文章主要介绍了Swift的内存管理，对内存管理感兴趣的同学，可以参考下
    2021-04-04
  • RxSwift发送及订阅 Subjects、Variables代码示例

    RxSwift发送及订阅 Subjects、Variables代码示例

    这篇文章主要介绍了RxSwift发送及订阅 Subjects、Variables代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • Swift利用AFN实现封装网络请求详解

    Swift利用AFN实现封装网络请求详解

    网络请求工具是我们经常用到的工具类，所以下面这篇文章主要给大家介绍了关于Swift利用AFN如何实现封装网络请求的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
    2017-10-10
  • 深入解析Swift语言中的协议

    深入解析Swift语言中的协议

    这篇文章主要介绍了深入解析Swift语言中的协议,是Swift入门学习中的基础知识,需要的朋友可以参考下
    2015-11-11
  • swift 错误处理do catch try try!使用详解

    swift 错误处理do catch try try!使用详解

    这篇文章主要介绍了swift 错误处理do catch try try!使用详解的相关资料,需要的朋友可以参考下
    2023-03-03

最新评论