美文网首页Swift编程程序员
Swift使用Quartz 2D进行绘图

Swift使用Quartz 2D进行绘图

作者: Color酸奶 | 来源:发表于2016-03-20 19:00 被阅读420次

    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度。其中负数表示顺时针旋转,正数表示逆时针旋转。

    相关文章

      网友评论

        本文标题:Swift使用Quartz 2D进行绘图

        本文链接:https://www.haomeiwen.com/subject/zbqklttx.html