maximbilan / ios-swift-drawing-app

Swift Drawing Application Sample

iOS Swift Drawing Application Sample

A simple example which describes how to draw in the UIView using Swift programming language. We need to create the class DrawingView inherited from UIView. With the following properties:

var drawColor = UIColor.blackColor()	// A color for drawing
var lineWidth: CGFloat = 5		// A line width
	
private var lastPoint: CGPoint!		// A point for storing the last position
private var bezierPath: UIBezierPath!	// A bezier path
private var pointCounter: Int = 0	// A counter of ponts
private let pointLimit: Int = 128	// A limit of points
private var preRenderImage: UIImage!	// A pre-render image

First of all, initialization. We need to create UIBezierPath and set up some properties.

override init(frame: CGRect) {
	super.init(frame: frame)
		
	initBezierPath()
}

required init(coder aDecoder: NSCoder) {
	super.init(coder: aDecoder)
		
	initBezierPath()
}
	
func initBezierPath() {
	bezierPath = UIBezierPath()
	bezierPath.lineCapStyle = kCGLineCapRound
	bezierPath.lineJoinStyle = kCGLineJoinRound
}

For better performance we will store the bezier path rendering to UIImage, so create the function renderToImage.

func renderToImage() {
		
	UIGraphicsBeginImageContextWithOptions(self.bounds.size, false, 0.0)
	if preRenderImage != nil {
		preRenderImage.drawInRect(self.bounds)
	}
		
	bezierPath.lineWidth = lineWidth
	drawColor.setFill()
	drawColor.setStroke()
	bezierPath.stroke()
		
	preRenderImage = UIGraphicsGetImageFromCurrentImageContext()
		
	UIGraphicsEndImageContext()
}

And implement the rendering function.

override func drawRect(rect: CGRect) {
	super.drawRect(rect)
		
	if preRenderImage != nil {
		preRenderImage.drawInRect(self.bounds)
	}
		
	bezierPath.lineWidth = lineWidth
	drawColor.setFill()
	drawColor.setStroke()
	bezierPath.stroke()
}

First, draw the pre-render image and after that render the current bezier path.
Now, main of our application, it's touch handling.

In touchesBegan function we save the last point and reset the point counter.

override func touchesBegan(touches: Set, withEvent event: UIEvent) {
	let touch: AnyObject? = touches.first
	lastPoint = touch!.locationInView(self)
	pointCounter = 0
}

In touchesMoved function, add a point to the bezier path, increment the point counter and if the point counter equals a point limit, than render the bezier path to UIImage and reset the bezier path. And update the screen.

override func touchesMoved(touches: Set, withEvent event: UIEvent) {
	let touch: AnyObject? = touches.first
	var newPoint = touch!.locationInView(self)
		
	bezierPath.moveToPoint(lastPoint)
	bezierPath.addLineToPoint(newPoint)
	lastPoint = newPoint
		
	++pointCounter
		
	if pointCounter == pointLimit {
		pointCounter = 0
		renderToImage()
		setNeedsDisplay()
		bezierPath.removeAllPoints()
	}
	else {
		setNeedsDisplay()
	}
}

In touchesEnded function reset the pointer counter, render the bezier path to UIImage, reset the bezier path and update the screen.

override func touchesEnded(touches: Set, withEvent event: UIEvent) {
	pointCounter = 0
	renderToImage()
	setNeedsDisplay()
	bezierPath.removeAllPoints()
}

In touchesCancelled function just call touchesEnded.

override func touchesCancelled(touches: Set!, withEvent event: UIEvent!) {
	touchesEnded(touches, withEvent: event)
}

For clearing the view we need remove all points from the bezier path, reset the pre-render image and update the display:

func clear() {
	preRenderImage = nil
	bezierPath.removeAllPoints()
	setNeedsDisplay()
}

And for checking lines on the view:

func hasLines() -> Bool {
	return preRenderImage != nil || !bezierPath.empty
}

That's all and we have really simple drawing application written by Swift.