Cut Bezier Path by y coordinate - ios

Question

I have got specific UIBezierPath, example
override func drawInContext(ctx: CGContext) {
if let slider = slider {
// Clip
let rect = bounds.insetBy(dx: bounds.width / 10, dy: bounds.height / 2.2)
let path = UIBezierPath(roundedRect: rect, cornerRadius: 5)
let circleRadius : CGFloat = 10
let xCoordInset = bounds.width / 10
let circlePath = UIBezierPath(ovalInRect: CGRectMake(xCoordInset , rect.midY - circleRadius, circleRadius * 2, circleRadius * 2))
let circlePath1 = UIBezierPath(ovalInRect: CGRectMake(bounds.width - xCoordInset - circleRadius, rect.midY - circleRadius, circleRadius * 2, circleRadius * 2))
let circlePath2 = UIBezierPath(ovalInRect: CGRectMake(rect.midX - circleRadius, rect.midY - circleRadius, circleRadius * 2, circleRadius * 2))
path.appendPath(circlePath)
path.appendPath(circlePath1)
path.appendPath(circlePath2)
CGContextAddPath(ctx, path.CGPath)
CGContextSetFillColorWithColor(ctx, slider.trackTintColor.CGColor)
CGContextFillPath(ctx)
}
}
I want to fill a half of this bezierPath with Gray Color, and another half with Red Color. So I suppose that I need to have 2 same layers, but 1 of them should be cut by y coordinate, can you advice some available methods for this action?

Answer 1

Clip to a rectangle above the cut line before filling with gray. Then clip to a rectangle below the cut line and fill with red.
override func drawInContext(ctx: CGContext) {
if let slider = slider {
// Clip
let rect = bounds.insetBy(dx: bounds.width / 10, dy: bounds.height / 2.2)
let path = UIBezierPath(roundedRect: rect, cornerRadius: 5)
let circleRadius : CGFloat = 10
let xCoordInset = bounds.width / 10
let circlePath = UIBezierPath(ovalInRect: CGRectMake(xCoordInset , rect.midY - circleRadius, circleRadius * 2, circleRadius * 2))
let circlePath1 = UIBezierPath(ovalInRect: CGRectMake(bounds.width - xCoordInset - circleRadius, rect.midY - circleRadius, circleRadius * 2, circleRadius * 2))
let circlePath2 = UIBezierPath(ovalInRect: CGRectMake(rect.midX - circleRadius, rect.midY - circleRadius, circleRadius * 2, circleRadius * 2))
path.appendPath(circlePath)
path.appendPath(circlePath1)
path.appendPath(circlePath2)
let yCut = bounds.midY // or whatever
CGContextSaveGState(ctx); do {
CGContextClipToRect(ctx, CGRectMake(bounds.minX, bounds.minY, bounds.width, yCut - bounds.minY))
CGContextAddPath(ctx, path.CGPath)
CGContextSetFillColorWithColor(ctx, slider.trackTintColor.CGColor)
CGContextFillPath(ctx)
}; CGContextRestoreGState(ctx)
CGContextSaveGState(ctx); do {
CGContextClipToRect(ctx, CGRectMake(bounds.minX, yCut, bounds.width, bounds.maxY - yCut))
CGContextAddPath(ctx, path.CGPath)
CGContextSetFillColorWithColor(ctx, slider.progressTintColor.CGColor)
CGContextFillPath(ctx)
}; CGContextRestoreGState(ctx)
}
}