LPLevelView

评分等级条
授权协议 GPL
开发语言 Objective-C
所属分类 iOS代码库、 高级UI组件(Advanced)
软件类型 开源软件
地区 国产
投 递 者 庾才
操作系统 iOS
开源组织
适用人群 未知
 软件概览

LPLevelView是一款类似AppStore评分等级条的软件。支持打分手动评级,蒙版剪切绘制自定义图标颜色

1.支持打分手动评级,点击即可打分,同时回调打分完成block:

@property (strong, nonatomic) void (^scoreBlock)(float level);

2.采用绘图渲染界面,高效流畅,可自定义图标和尺寸等:

///整星图标,半星和空星尺寸以整星为准
@property (strong, nonatomic) UIImage *iconFull;
///半星图标
@property (strong, nonatomic) UIImage *iconHalf;
///空星图标
@property (strong, nonatomic) UIImage *iconEmpty;
///图片尺寸,默认为iconFull图标的尺寸,同时自适应self尺寸
@property (assign, nonatomic) CGSize iconSize;

绘制图标到画布

- (void)drawIcons
{    //计算绘制的图标尺寸
    CGSize size = [self sizeOfIcon];    //纵坐标
    CGFloat y = (self.bounds.size.height - size.height) / 2.l;    //图标间距
    CGFloat spacing = (self.bounds.size.width - size.width*_maxLevel)/(CGFloat)_maxLevel;    //横坐标
    CGFloat x = spacing/2.l;    for (int i=1; i<=_maxLevel; i++) {        //①获取图标
        UIImage *iconImg;        if (i <= _level) {//整星
            iconImg = _iconFull;
        }else if (i-_level < 1 && !_levelInt) {//半星
            if (_iconHalf) iconImg = _iconHalf;            else return;
        }else if (_iconHalf) {//空星
            iconImg = _iconEmpty;
        }        //③绘制
        [iconImg drawInRect:CGRectMake(x, y, size.width, size.height)];        //④横坐标右移,以便绘制下一个图标
        x += size.width + spacing;
    }
}

计算绘制的图标尺寸

- (CGSize)sizeOfIcon
{    //最大宽度
    CGFloat width = self.bounds.size.width/(CGFloat)_maxLevel;
    width = MIN(width, _iconFull.size.width);    if (_iconSize.width != 0) width = MIN(width, _iconSize.width);    //宽度伸缩比
    CGFloat wScale = width / _iconFull.size.width;    //最大高度
    CGFloat height = self.bounds.size.height;
    height = MIN(height, _iconFull.size.height);    if (_iconSize.height != 0) height = MIN(height, _iconSize.height);    //高度伸缩比
    CGFloat hScale = height / _iconFull.size.height;    //实际伸缩比
    CGFloat scale = MIN(wScale, hScale);    //实际尺寸
    CGSize size = CGSizeMake(_iconFull.size.width * scale, _iconFull.size.height * scale);    return size;
}

3.蒙版剪切自定义图标颜色:

@property (strong, nonatomic) UIColor *iconColor;

剪切

- (void)drawRect:(CGRect)rect
{    //绘制默认图标
    if (_iconColor) {        CGContextRef context = UIGraphicsGetCurrentContext();        CGContextSaveGState(context);        CGContextClipToMask(context, rect, [self clipPathImage]);//按蒙版图像路径剪切
        CGContextSetFillColorWithColor(context, _iconColor.CGColor);        CGContextFillRect(context, rect);        CGContextRestoreGState(context);
    }    //绘制自定义图标
    else {
        [self drawIcons];//绘制
    }
}

绘制蒙版图像,即剪切路径

- (CGImageRef)clipPathImage
{    //在内存中创建image绘制画布
    CGFloat scale = [UIScreen mainScreen].scale;//必须设置画布分辨率,否则会模糊
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, scale);    CGContextRef imageContext = UIGraphicsGetCurrentContext();    //翻转画布坐标系Y轴再平移坐标系原点到(0,0)位置,此处使用矩阵变换
    CGFloat transY = CGContextGetClipBoundingBox(imageContext).size.height;    CGContextConcatCTM(imageContext, CGAffineTransformMake(1, 0, 0, -1, 0, transY));    //绘制
    [self drawIcons];    //提取UIImage
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();    //释放该画布
    CGContextRelease(imageContext);    UIGraphicsEndImageContext();//关闭image绘制
    return image.CGImage;
}
 相关资料
  • 使用 Elo 评分系统 计算两个或两个以上对手之间的新评分。它需要一个预定义数组,并返回一个包含事后评级的数组。 数组应该从最高评分到最低评分排序(赢家 -> 失败者)。 使用指数 ** 操作符和数学运算符来计算预期分数(获胜几率),并计算每个对手的新评级。对每个对手计算新的评分。 循环评分,使用每个排列组合,以成对方式计算每个玩家的 Elo 评分。 忽略第二个参数,使用默认的 k-factor

  • Rate 组件使用 html5 中 data- 属性实现,当点击评分区域时,获取 data 属性的值,然后通过 vue 中 :class 控制评分星星的状态,即是否为 active。 <template> <div class="page__bd"> <div class="weui-cells__title">点击评分</div> <div class="weui

  • 主要内容:本节引言:,1.RatingBar基本使用:,2.定制环节:,本节小结:本节引言: 上一节的SeekBar是不是很轻松咧,本节我们学的这个RatingBar(星级评分条)也非常简单,相信在某宝, 买过东西的对这个应该不陌生,收到卖家的包裹,里面很多时候会有个小纸片,五星好评返还多少元这样, 而评分的时候就可以用到我们这个星级评分条了~先来瞅瞅官方文档 官方文档:RatingBar 我们可以看到,这玩意和SeekBar的类结构是一样的,也是ProgressBar的子类:

  • 本文向大家介绍JavaScript实现星星等级评价功能,包括了JavaScript实现星星等级评价功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js星星等级评价的具体代码,供大家参考,具体内容如下 效果图: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Android星级评分条的实现代码,包括了Android星级评分条的实现代码的使用技巧和注意事项,需要的朋友参考一下 RatingBar星级评分条 它跟拖动条类似。都允许用户拖动来改变进度,不同的是,星级评分条通过星星图案表示进度。想淘宝,等等都有这个东西。很简单。 重要记一个组件<RatingBar 属性列表></RatingBar>,属性见名知意 还有三个方法: 1、getRat

  • 本文向大家介绍Android实现根据评分添加星级条,包括了Android实现根据评分添加星级条的使用技巧和注意事项,需要的朋友参考一下 简述 在仿写豆瓣的时候,发现了根据评分不同,星级数也不同的星级条。 百度一搜,发现Android有自带控件UIRatingBar,而iOS得要自己写…好吧,那就写吧。 图片素材 首先,要准备三张图片,图片如下: 空星,半星,全星 因为我们可以看到,在豆瓣的评分星级