iOS 星级评论-小星星的画法

2017-10-20  本文已影响46人  _Waiting_
你会画小星星吗?

嘿嘿,最近有个项目用到了星级评论,百度一下,发现有一些文章是直接拿两张图片进行设置的,各有各法。本文是利用CAShapeLayer画出来的,写出来仅供大家参考。

效果图

说一下画图的原理,就是计算出小星星十个点,连线进行填充颜色就行了。废话不多说,直接上代码。

-(void)creatViewWitNumber:(float)number
{
    self.layer.masksToBounds = YES; 
    float R = self.frame.size.width/2;
    float r = R * sinf(M_PI * 18/180.0)/sinf(M_PI * 36/180.0);
    
    //用来画五角星
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    for(int i = 0;i<5;i++ )//
    {
        float x = R * cos(M_PI * 72/180.0 * i - M_PI * 18/180.0) + R;
        float y = R * sin(M_PI * 72/180.0 * i - M_PI * 18/180.0) + R;
        
        float x1 = r * cos(M_PI * 72/180.0 * i + M_PI * 36/180.0 - M_PI * 18/180.0) + R;
        float y1 = r * sin(M_PI * 72/180.0 * i + M_PI * 36/180.0 - M_PI * 18/180.0) + R;
        
        CGPoint point = CGPointMake(x, y);
        CGPoint point1 = CGPointMake(x1, y1);
        if(i == 0)
        {
            [path moveToPoint:point];
            [path addLineToPoint:point1];
        }
        else
        {
            [path addLineToPoint:point];
            [path addLineToPoint:point1];
        }
    }
    
    [path closePath];
    
    //外侧五角星框
    CAShapeLayer *slayer = [CAShapeLayer layer];
    slayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.width);
    slayer.path = path.CGPath;
    slayer.fillColor = [UIColor clearColor].CGColor;
    slayer.strokeColor = [UIColor orangeColor].CGColor;
    slayer.lineWidth = 1;
    [self.layer addSublayer:slayer];
    
    //内侧五角星
    CAShapeLayer *slayer1 = [CAShapeLayer layer];
    slayer1.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.width);
    slayer1.path = path.CGPath;
    
    CALayer *layer1 = [CALayer layer];
    layer1.frame = CGRectMake(0, 0, self.frame.size.width * _starNumber, self.frame.size.width);
    layer1.backgroundColor = [UIColor orangeColor].CGColor;
    layer1.mask = slayer1 ;
    [self.layer addSublayer:layer1];
}

//设置小星星的填充
- (void)setStarNumber:(float)starNumber
{
    _starNumber = starNumber;
    [self creatViewWitNumber:starNumber];
}

写完收工
demo下载地址:
http://download.csdn.net/download/qq_14827361/10032195

上一篇 下一篇

猜你喜欢

热点阅读