Question

我正在创建一个定制的明星＆＃39;控制，你可以将一个浮点数传递给控件作为评级，即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]路径只有一次。这意味着对于分数恒星，你只会看到恒星的一半而不是另一半。在下面的代码中，每个星星都填充了白色，然后如果星星的任何部分在评级范围内，那么它将再次填充蓝色。

我还注意到你使用的剪裁矩形在xCenter而不是星的左手边开始了它的X.

我还调整了一些数学，以更一致地计算每颗恒星的填充百分比。

 - (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创建反映评级的矩形路径。

使用星形路径进行剪辑。

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

2 个答案: