Swift 实践之绘画

绘画

工程目录

这里都使用Storyboard,方便而又快捷.

绘画的相关介绍

 /*        1 CGContextMoveToPoint 开始画线        2 CGContextAddLineToPoint 画直线        3 CGContextAddEllipseInRect 画一椭圆        4 CGContextSetLineCap 设置线条终点形状        5 CGContextSetLineDash 画虚线        6 CGContextAddRect 画一方框        7 CGContextStrokeRect 指定矩形        8 CGContextStrokeRectWithWidth 指定矩形线宽度        9 CGContextStrokeLineSegments 一些直线        10 CGContextAddArc 画已曲线 前俩店为中心 中间俩店为起始弧度 最后一数据为0则顺时针画 1则逆时针        11 CGContextAddArcToPoint(context,0,0, 2, 9, 40);//先画俩条线从point 到 弟1点 ， 从弟1点到弟2点的线  切割里面的圆        12 CGContextSetShadowWithColor 设置阴影        13 CGContextSetRGBFillColor 填充颜色        14 CGContextSetRGBStrokeColor 画笔颜色设置        15 CGContextSetFillColorSpace 颜色空间填充        16 CGConextSetStrokeColorSpace 颜色空间画笔设置        17 CGContextFillRect 补充当前填充颜色的rect        18 CGContextSetAlaha 透明度        19 CGContextTranslateCTM 改变画布位置        20 CGContextSetLineWidth 设置线的宽度        21 CGContextAddRects 画多个线        22 CGContextAddQuadCurveToPoint 画曲线        23 CGContextStrokePath 开始绘制图片        24 CGContextDrawPath 设置绘制模式        25 CGContextClosePath 封闭当前线路        26 CGContextTranslateCTM(context, 0, rect.size.height);    CGContextScaleCTM(context, 1.0, -1.0);反转画布        27 CGContextSetInterpolationQuality 背景内置颜色质量等级        28 CGImageCreateWithImageInRect 从原图片中取小图        */

绘画线条

////  DrawLinesView.swift//  Study_DrawShape////  Created by 周文春 on 16/3/17.//  Copyright © 2016年 周文春. All rights reserved.//import UIKitclass DrawLinesView: UIView {    override init(frame: CGRect) {        super.init(frame: frame)    }    required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)    }    override func drawRect(rect: CGRect) {        let context = UIGraphicsGetCurrentContext()        //表示从哪个起点开始画        CGContextMoveToPoint(context, 100, 100)        //向下开始画线(表示画直线)        CGContextAddLineToPoint(context, 100, 200)        //向右开始画线        CGContextAddLineToPoint(context, 200, 200)        CGContextMoveToPoint(context, 100, 300)        CGContextAddLineToPoint(context, 100, 400)        CGContextAddLineToPoint(context, 200, 500)        //设置所画线条的颜色        CGContextSetRGBStrokeColor(context, 1, 0, 1, 1)        //设置线条的宽度是多少        CGContextSetLineWidth(context, 3)        //开始绘制图        CGContextStrokePath(context)    }}

绘画矩形

////  DrawRectView.swift//  Study_DrawShape////  Created by 周文春 on 16/3/17.//  Copyright © 2016年 周文春. All rights reserved.//import UIKitclass DrawRectView: UIView {    override init(frame: CGRect) {        super.init(frame: frame)    }    required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)    }    // Only override drawRect: if you perform custom drawing.    // An empty implementation adversely affects performance during animation.    override func drawRect(rect: CGRect) {        // Drawing code        //创建一个画布,用于将我们所画的东西在这个上面展示出来        let context = UIGraphicsGetCurrentContext()        //画一个矩形        CGContextAddRect(context, CGRect(x: 100, y: 100, width: 100, height: 100))        CGContextSetRGBFillColor(context, 1, 0, 0, 1)        CGContextFillPath(context)        //边框宽度        CGContextSetLineWidth(context, 2)        //边框颜色        CGContextSetRGBStrokeColor(context, 0, 1, 0, 1)        CGContextStrokeRect(context, CGRect(x: 100, y: 100, width: 100, height: 100))    }}

绘画圆

////  DrawCircleView.swift//  Study_DrawShape////  Created by 周文春 on 16/3/17.//  Copyright © 2016年 周文春. All rights reserved.//import UIKitclass DrawCircleView: UIView {    required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)    }    // Only override drawRect: if you perform custom drawing.    // An empty implementation adversely affects performance during animation.    override func drawRect(rect: CGRect) {       let context = UIGraphicsGetCurrentContext()        /**        *  绘制圆形        *        *  @param context 画布        *  @param 150     弧心距离X轴的距离        *  @param 300     弧心距离Y轴的距离        *  @param 100     弧半径        *  @param 0       起始角度        *  @param 3.14    结束角度        *  @param 0       顺时针还是逆时针;0表示顺时针,1表示逆时针        *        *  @return <#return value description#>        */        //第一个参数表示我们我们所在的画布,第二和第三个参数表示开始的点在父视图的什么位置,第四个参数表示弧的半径有多大,第五个参数表示起始的角度,第六个参数表示结束的角度(3.14表示半圆),最后一个参数表示顺时针还是逆时针,0表示顺时针,1表示逆时针        //填充色        CGContextAddArc(context, 150, 200, 100, 0, 3.141592653*2, 0)        CGContextSetRGBFillColor(context, 1, 0, 0, 1)        CGContextFillPath(context)        //第一种方式绘制        CGContextAddArc(context, 150, 200, 100, 0, 3.141592653*2, 0)        CGContextSetLineWidth(context, 10)        CGContextStrokePath(context)        //第二种方式绘制        CGContextAddEllipseInRect(context, CGRect(x: 50, y: 400, width: 200, height: 200))        CGContextStrokePath(context)    }}

绘画图片

////  DrawImageView.swift//  Study_DrawShape////  Created by 周文春 on 16/3/17.//  Copyright © 2016年 周文春. All rights reserved.//import UIKitclass DrawImageView: UIView {    var uiImage: CGImageRef?    required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)        uiImage = UIImage(named: "101.jpg")?.CGImage    }    // Only override drawRect: if you perform custom drawing.    // An empty implementation adversely affects performance during animation.    override func drawRect(rect: CGRect) {        let context = UIGraphicsGetCurrentContext()        //保存最初始的一个状态        CGContextSaveGState(context)        //移动到某个位置        CGContextTranslateCTM(context, 10, 400)        //调整缩放        CGContextScaleCTM(context, 1, -1)        //如果不调整坐标的话,我们会发现图片显示出来是反着的,因为CGImage和图片的坐标是反着的,上面两行为调整代码        CGContextDrawImage(context, CGRect(x: 0, y: 0, width: 200, height: 200), uiImage)        //回复最开始的状态        CGContextRestoreGState(context)        //如果不设置保存和恢复两种状态时会发现我们再绘制的图形会在之前绘制图片的里面,所以我们要想不影响后续的绘图时,要进行最初的一个状态的保存和恢复        CGContextStrokeRect(context, CGRect(x: 50, y: 100, width: 100, height: 100))    }}

不调整坐标的话效果如下:

不添加状态,再次绘其他图的话效果如下:

绘制画板

////  DrawingBoardView.swift//  Study_DrawShape////  Created by 周文春 on 16/3/17.//  Copyright © 2016年 周文春. All rights reserved.//import UIKitclass DrawingBoardView: UIView {    required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)    }    var path = CGPathCreateMutable()    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {        for touch: AnyObject in touches {            let p: UITouch = touch as! UITouch            CGPathMoveToPoint(path, nil, p.locationInView(self).x, p.locationInView(self).y)            print(p.locationInView(self).x, p.locationInView(self).y)        }    }    override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {        for touch: AnyObject in touches {            let p: UITouch = touch as! UITouch            CGPathAddLineToPoint(path, nil, p.locationInView(self).x, p.locationInView(self).y)            //重绘            print(p.locationInView(self).x, p.locationInView(self).y)            setNeedsDisplay()        }    }    // Only override drawRect: if you perform custom drawing.    // An empty implementation adversely affects performance during animation.    override func drawRect(rect: CGRect) {        // Drawing code        let context = UIGraphicsGetCurrentContext()        CGContextAddPath(context, path)        CGContextStrokePath(context)    }}

可以自己画图:

整体效果图如下: