Overriding drawRect for drawing app

Question

I am building a demo drawing application. I am using touchesMoved:withEvent to collect my points and adding them to a CGMutablePathRef. To stroke the path, I override DrawRect, add the path to the context and stroke the path:

   override func drawRect(rect: CGRect) {
    self.backgroundColor?.set()
    UIRectFill(rect)

    let context : CGContextRef = UIGraphicsGetCurrentContext()
    for line in pathArray {
        CGContextAddPath(context, line.structPath)
        CGContextSetLineWidth(context, line.structLineWidth)
        CGContextSetStrokeColorWithColor(context, line.structLineColor.CGColor)
        CGContextSetAlpha(context, lineOpacity)

    }
    CGContextSetLineCap(context, kCGLineCapRound)
    CGContextStrokePath(context)

    self.empty = false
}

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    if let touch = touches.first as UITouch! {
        previousPoint = touch.previousLocationInView(self)
        previousPreviousPoint = touch.previousLocationInView(self)
        currentPoint = touch.locationInView(self)
    }
    self.touchesMoved(touches, withEvent: event)
}

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


     if let touch = touches.first as UITouch! {

        previousPreviousPoint = previousPoint
        previousPoint = touch.previousLocationInView(self)
        currentPoint = touch.locationInView(self)

        let mid1 : CGPoint = getMidPoint(previousPoint, p2: previousPreviousPoint)
        let mid2 : CGPoint = getMidPoint(currentPoint, p2: previousPoint)

        let subpath : CGMutablePathRef = CGPathCreateMutable()
        CGPathMoveToPoint(subpath, nil, mid1.x, mid1.y)
        CGPathAddQuadCurveToPoint(subpath, nil, previousPoint.x, previousPoint.y, mid2.x, mid2.y)

        let bounds : CGRect = CGPathGetBoundingBox(subpath)
        let drawBox : CGRect = CGRectInset(bounds, -2.0 * lineWidth, -2.0 * lineWidth)

        let newLine = line(newPath: subpath)
        pathArray.append(newLine)
        self.setNeedsDisplayInRect(drawBox)
    }
}

The above code works as expected, except I am seeing a unexpected result. The "draw box" which gets the bandbox and sets a CGRectInset changes the lineColor of other paths already drawn:

I understand (sort of) why this is happening, but cannot find a solution to this problem. Any suggestions would be most appreciated!

Answer 1

You want to stroke each path separately, like this:

override func drawRect(rect: CGRect) {
    let context : CGContextRef = UIGraphicsGetCurrentContext()

    // Set parameters in the context that are the same for all lines
    CGContextSetLineCap(context, kCGLineCapRound)
    CGContextSetAlpha(context, lineOpacity)

    for line in pathArray {
        // Set parameters in the context that are specific to this line
        CGContextSetLineWidth(context, line.structLineWidth)
        CGContextSetStrokeColorWithColor(context, line.structLineColor.CGColor)

        // Add the line's path to the context's current path:
        CGContextAddPath(context, line.structPath)
        // And stroke it.
        CGContextStrokePath(context)
        // (This has the side effect of clearing the context's current path.)
    }
}

The CGContext keeps track of a current path. Think of it as a CGMutablePath that you don't have direct access to. You can affect it by calling functions like CGContextAddPath or many others.

The CGContext's current path is not actually visible until you tell the context to draw it, by calling a function like CGContextStrokePath. At that time, the context uses the current path and the other values in the context (stroke color, alpha, line width, etc.) to figure out what to draw, and draws it.

Your code was adding each line's path into the current path, so you ended up with the current path containing several disconnected subpaths. Then you called CGContextStrokePath once at the end, and all of those subpaths were drawn using the values of the parameters that you most recently set. So you saw only the last line's width and color.