剪辑 CGPath 并填充两种不同的颜色

Question

我正在创建一个自定义的“星”控件，因为您可以将浮点数传递给控件作为评级，即 2.5，并且 5 颗星中的 2.5 颗将被涂成红色，其余的，灰色。

我正在使用具有 5 个点的 UIBezierPath 绘制星星，并且效果很好。但是，当我使用浮点数时，我需要确保考虑到小数。我认为实现这一点的最佳方法是将贝塞尔路径裁剪为最终宽度的一部分，但是，这种方法似乎对绘图本身没有任何影响；星星按正常绘制，不考虑小数。

正如您可能希望我说的那样，我确实才刚刚开始涉足 CoreGraphics，并且想解释一下为什么我的方法不起作用以及修复它的方法，以帮助我通过框架。

期待听到一些回应！

- (void)drawStarsWithRating:(float)rating maxRating:(float)maxRating yOrigin:(CGFloat)yOrigin inContext:(CGContextRef)context {
    float width = MKRGlyphSize;

    CGFloat xCenter = MKRLeftBorderPadding + (0.5 * width);
    CGFloat yCenter = yOrigin + (0.5 * width);

    double r = width / 2.0;
    float flip = -1.0;

    for (NSUInteger i = 0; i < maxRating; i++) {
        CGContextSaveGState(context);
        if (i < rating) {
            if (self.selected) {
                CGContextSetFillColorWithColor(context, RGB(125, 212, 67).CGColor);
            }
            else {
                CGContextSetFillColorWithColor(context, RGB(215, 35, 32).CGColor);
            }
        }
        else {
            if (self.selected) {
                CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
            }
            else {
                CGContextSetFillColorWithColor(context, RGB(178, 178, 178).CGColor);
            }
        }

        double theta = 2.0 * M_PI * (2.0 / 5.0);
        UIBezierPath *bezier = [UIBezierPath bezierPath];
        [bezier moveToPoint:CGPointMake(xCenter, r * flip + yCenter)];

        for (NSUInteger k = 1; k < 5; k++) {
            float x = r * sin(k * theta);
            float y = r * cos(k * theta);
            [bezier addLineToPoint:CGPointMake(x + xCenter, y * flip + yCenter)];
        }
        [bezier setLineWidth:1.0f];
        [bezier setLineJoinStyle:kCGLineJoinMiter];
        [bezier closePath];
        [bezier fill];
        if (rating - floorf(rating) > 0) {
            CGRect clipRect = CGRectMake(xCenter, yOrigin, width * (rating - floorf(rating)), width);
            CGContextClipToRect(context, clipRect);
        }
        xCenter += width;
        CGContextRestoreGState(context);
    }
}

Answer 1

我注意到的一个问题是你[fill] 路径只有一次。这意味着对于分数星，您只会看到恒星的一半而不是另一半。在下面的代码中，每个星都用白色填充，然后如果星的任何部分在评级范围内，则再次用蓝色填充。

我还注意到，您使用的剪切矩形的 X 从 xCenter 开始，而不是星号的左侧。

我还稍微调整了数学以更一致地计算每个星的填充百分比。

 - (void)drawStarsWithRating:(float)rating maxRating:(float)maxRating yOrigin:(CGFloat)yOrigin inContext:(CGContextRef)context {
    float width = MKRGlyphSize;

    CGFloat xCenter = MKRLeftBorderPadding + (0.5 * width);
    CGFloat yCenter = yOrigin + (0.5 * width);

    double r = width / 2.0;
    float flip = -1.0;

    for (NSUInteger i = 0; i < maxRating; i++) {
        CGContextSaveGState(context);

        // for clarity, i removed the colors from the top
        // and ignore selected state. i use blue/white
        // colors hard coded below
        //
        // you can easily change those colors just as you
        // had before

        // create star path
        double theta = 2.0 * M_PI * (2.0 / 5.0);
        UIBezierPath *bezier = [UIBezierPath bezierPath];
        [bezier moveToPoint:CGPointMake(xCenter, r * flip + yCenter)];
        for (NSUInteger k = 1; k < 5; k++) {
            float x = r * sin(k * theta);
            float y = r * cos(k * theta);
            [bezier addLineToPoint:CGPointMake(x + xCenter, y * flip + yCenter)];
        }
        [bezier setLineWidth:1.0f];
        [bezier setLineJoinStyle:kCGLineJoinMiter];
        [bezier closePath];

        // fill background of star with white
        [[UIColor whiteColor] setFill];
        [bezier fill];

        // calculate the percentage of this star
        // that we should fill
        CGFloat currStar = i;
        CGFloat percentOfStar;
        if(rating > currStar){
            // at least some of the star should be filled
            percentOfStar = rating - currStar > 0 ? rating - currStar : 0;
            percentOfStar = percentOfStar > 1 ? 1 : percentOfStar;
        }else{
            // none of the star should be filled
            percentOfStar = 0;
        }
        if (percentOfStar) {
            // if we need at least a little filling, then clip to that % of the star
            // notice (xCenter - .5*width) to align the clipRect to the left side of
            // the star.
            // now fill the selected portion of the star with blue
            CGRect clipRect = CGRectMake(xCenter - .5*width, yOrigin, width * (percentOfStar), width);
            CGContextClipToRect(context, clipRect);
            [[UIColor blueColor] setFill];
            [bezier fill];
        }
        xCenter += width;
        CGContextRestoreGState(context);
    }
}

Answer 2

你可以做的稍有不同：

用背景颜色填充视图的背景

使用 percentOfStar 创建一个反映评分的矩形路径。

使用星形路径进行剪辑。