Optimising on screen feedback drawing cubic bezier curved lines in Swift - ios

Question

The below code draws curved lines while the user moves their finger across the screen. The method used to draw the cubic bezier curve is addCurveToPoint. However this method requires a full 1.. 2.. 3.. 4.. touch points before it can draw the curve on screen. This method causes a very short but noticeable laggy feedback on screen as nothing is drawn while the new touch points are gathered.
With code example/s, what new code/edits can be introduced into the below code to draw for instance a temporary line while touch points 1.. 2.. 3.. are gathered, with the temporary line removed once the proper curve is drawn so that the impression is drawing has begun immediately?
Or, what other techniques are available and can be used to give the user immediate feedback and the impression drawing has started on screen even though the touch points are still being gathered before they are properly drawn?
Note, the solution must be suitable for iOS7, iOS8 and iOS9 (i.e.
Advanced Touch Handling in iOS9 won't be suitable).
// Swift 2 code below tested using Xcode 7.0.1.
class drawView: UIView {
var path:UIBezierPath?
var incrementalImage:UIImage?
var points = [CGPoint?](count: 5, repeatedValue: nil)
var counter:Int?
var infoView:UIView = UIView()
var strokeColor:UIColor?
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.multipleTouchEnabled = false
self.backgroundColor = UIColor.whiteColor()
path = UIBezierPath()
path?.lineWidth = 20.0
strokeColor = UIColor.darkGrayColor()
path?.lineCapStyle = CGLineCap.Round
}
override init(frame: CGRect) {
super.init(frame: frame)
self.multipleTouchEnabled = false
path = UIBezierPath()
path?.lineWidth = 20.0
}
override func drawRect(rect: CGRect) {
incrementalImage?.drawInRect(rect)
strokeColor?.setStroke()
path?.stroke()
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
counter = 0
let touch: AnyObject? = touches.first
points[0] = touch!.locationInView(self)
infoView.removeFromSuperview()
}
override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
let touch: AnyObject? = touches.first
let point = touch!.locationInView(self)
counter = counter! + 1
points[counter!] = point
if counter == 4{
points[3]! = CGPointMake((points[2]!.x + points[4]!.x)/2.0, (points[2]!.y + points[4]!.y)/2.0)
path?.moveToPoint(points[0]!)
path?.addCurveToPoint(points[3]!, controlPoint1: points[1]!, controlPoint2: points[2]!)
self.setNeedsDisplay()
points[0]! = points[3]!
points[1]! = points[4]!
counter = 1
}
}
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
self.drawBitmap()
self.setNeedsDisplay()
path?.removeAllPoints()
counter = 0
}
override func touchesCancelled(touches: Set<UITouch>?, withEvent event: UIEvent?) {
self.touchesEnded(touches!, withEvent: event)
}
func drawBitmap(){
UIGraphicsBeginImageContextWithOptions(self.bounds.size, true, 0.0)
strokeColor?.setStroke()
if((incrementalImage) == nil){
let rectPath:UIBezierPath = UIBezierPath(rect: self.bounds)
UIColor.whiteColor().setFill()
rectPath.fill()
}
incrementalImage?.drawAtPoint(CGPointZero)
path?.stroke()
incrementalImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
}
}

Answer 1

What about drawing Beziers of lower order when the first points are available ?
2 points define a linear Bezier (i.e. a line segment),
3 points define a quadratic Bezier.
In addition, you can think of rubberbanding, i.e. redrawing the curve while the last point is still moving (the former ones remaining fixed), until you fix it and start moving yet another.