Search code examples
paintcode

How do i fill part of a shape's color in PaintCode?

So i have this vector in for a rating system in PaintCode

enter image description here

I would like to be able to fill the colors partially. Like this:

enter image description here

Can this be accomplished in PaintCode?

Solution

  • Yes, it’s possible.

    Animated Rating

    How did I do that:

    1. Made the stars as a clipping shape for a simple rectangle in the background.

    2. Created a numeric variable Stars that is supposed to be from 0 to 5. This will be a parameter of the canvas:

      - (void)drawRatingWithStars: (CGFloat)stars;

    3. Created an expression variable Width like 100 / 5 * stars, where 100 is the width of all 5 stars.

    4. Attached this Width variable to the width of the rectangle.

    Edit: The GIF animation was exported from PaintCode using a helper fraction variable Animation, which I animated from 0 to 1 (in GIF export settings). I then changed Stars to be an expression with this content 5 - 10 * abs(animation - 0.5). That maps numbers in 0..1 to 0..5..0.