Cowboy Tech

iOS绘图API演示

绘制直线

代码

class DrawLinesView: UIView {

// 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()

    //绘画起点
    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, 5)
    //绘制线条
    CGContextStrokePath(context)

}

绘制矩形

代码

import UIKit

class DrawRectView: UIView {

// 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, 5)
    //设置外框颜色
    CGContextSetRGBStrokeColor(context,0 ,1, 0, 1)
    //绘制外框
    CGContextStrokeRect(context, CGRect(x: 100, y: 100, width: 100, height: 100))

}
}

绘制圆形

代码

import UIKit

class DrawCircle: UIView { 
// 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()

    //加入圆形
    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: 100))
    //绘制
    CGContextStrokePath(context)
}
}

绘制图片

代码

import UIKit

class DrawImageView: UIView {

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
    // Drawing code

    var uiImage:CGImageRef?

    uiImage = UIImage(named: "girl.jpg")?.CGImage

    let context = UIGraphicsGetCurrentContext()

    //context状态的维持和释放,不影响其他图像的绘制
    CGContextSaveGState(context)

    //没有如下这两个图像会翻转
    CGContextTranslateCTM(context, 10, 400)
    CGContextScaleCTM(context, 1, -1)
    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))
}
}

绘图板

代码

import UIKit

class DrawBoardView: UIView {

var path = CGPathCreateMutable()

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {

    let p = (touches as NSSet).anyObject()?.locationInView(self)

    CGPathMoveToPoint(path, nil, p!.x, p!.y)

}

override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {

    let p = (touches as NSSet).anyObject()?.locationInView(self)

    CGPathAddLineToPoint(path, nil, p!.x, p!.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)

}

}

怎么清空画板

1.重新运行程序即可清空
2.设置个按钮点击事件实现清空之前所有操作
3.使用CGContextClearRect,
4.重新初始化path,这样重画的时候不会检测到之前有线条的path,画面就自动清空了

橡皮擦功能

较粗的和背景颜色同样的线条

绘制图像时解决翻转问题

CGContextTranslateCTM(context, 10, 400)
CGContextScaleCTM(context, 1, -1)

context状态的维持和释放

//context状态的维持和释放,不影响其他图像的绘制
CGContextSaveGState(context)
.............绘制代码
CGContextRestoreGState(context)

setNeedsDisplay()

执行这个方法时会调用drawRect重新绘图