Cut Bezier Path by y coordinate

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?

you could create two identical shapes and apply a mask one of them — konrad.bajtyngier, Mar 03 '16 at 15:39

score 0 · Accepted Answer · answered Mar 05 '16 at 07:22

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)

        }
    }

Cut Bezier Path by y coordinate

1 Answers1