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.