HYBImageCliped
开源高效处理圆角的扩展,包括UIImageView、UIView、UIButton、UIImage的扩展API,可根据图片颜色生成图片带任意圆角,可给UIButton根据不同状态处理图片。所有生成图片都不会引起离屏渲染且不会引起离屏、图层混合,支持添加图片边框
Install / Use
/learn @CoderJackyHuang/HYBImageClipedREADME
HYBImageCliped
开源高效处理圆角的扩展,包括UIImageView、UIView、UIButton、UIImage的扩展API,可根据图片颜色生成图片带任意圆角,可给UIButton根据不同状态处理图片。所有生成图片都不会引起离屏渲染且不会引起blended color layer、misaligned image等。
#概述
开源项目名称:HYBImageCliped
**当前版本:**2.2.3
**项目用途:**可给任意继承UIView的控件添加任意多个圆角、可根据颜色生成图片且可带任意个圆角、给UIButton设置不同状态下的图片且可带任意圆角、给UIImageView设置任意图片,支持带圆角或者直接生成圆形。上述功能都不会造成离屏渲染。
#版本变化
###Version 2.2.3
- 增加对自动布局的支持
###Version 2.2.2
- 增加刷新缓存的功能,用于解决view的宽高需要动态变化这种需求
// UIView的扩展属性,默认为NO。设置为YES时,则会刷新缓存,重新添加
@property (nonatomic, assign) BOOL hyb_shouldRefreshCache;
###Version 2.2.1
- fix单圆角或者双圆角也显示成四个圆角的bug
###Version 2.2.0
- 修改添加边框颜色的方法,并缓存
- 增加单边框的API
- 增加镂空图圆角设置,且对镂空图缓存,以提高效率
- 修改UIView的圆角方式增加了策略:
- 1、若要求设置双边框,走裁剪图片;
- 2、若图片比例相差不大,则使用镂空图
- 3、若图片比例不大,但是要求边框,则剪裁且添加镂空图
增加了Demo,比对添加圆角后的效果:

优化后的多了好多的控件,所以效果没有达到60~
###Version 2.1.1
- 优化内存,及时释放不用的图片
###Version 2.1.0
- 增加带圆角的图片可以设置边框
- 增加图片缓存到内存功能、异步读取、保存图片功能、异步清除缓存功能

###Version 2.0.0
- 将UIImageView扩展中的API全部移至UIView扩展,这样可以直接使用更轻量的UIView来显示图片,而不需要UIImageView。同时还可以兼容使用UImageView的同学
- 增加几个方便生成图片的API
- 新增图片添加边框功能
效果如下:

详情查看:Version2.0.0新增API
###Version 1.1.1
- fix bug
- 优化内存
###Version 1.1.0
- 增加剪裁的图片缓存管理类HYBImageClipedManager,用于解决缓存到内存引起内存增长很快的问题。详情查看**HYBImageClipedManager**
###Version 1.0.1
- fix文档未上传的bug
- 去掉不相关的注释
- 增加demo
#Screenshot

#裁剪花费的时间

正常图片裁剪所花费的时间是挺小的,但是当图片过大时,花费时间也会越多。但是,裁剪前滚动列表是非常明显地卡,裁剪后滚动是明显的流畅。对于图片列表这个demo中,裁剪后FPS能平均在58左右,基本没有感觉到卡。
#如何使用
在使用之前,先引入头文件:
#import "HYBImageCliped.h"
##<a name="HYBImageClipedManager"></a>HYBImageClipedManager
此类用于处理图片缓存到本地,解决内存增长问题。只有以下几个API,分别是读取图片、存储图片、获取缓存大小、清空缓存:
/**
* 根据存储时指定的key从本地获取已剪裁好的图片
*
* @param key 通常是URL。在内部会进行MD5
*
* @return 从本地读取图片,不会存储到内存中,用于解决图片列表中内存暴涨问题
*/
+ (UIImage *)clipedImageFromDiskWithKey:(NSString *)key;
/**
* 在裁剪成功后,可以调用此API,将剪裁后的图片存储到本地。
*
* @param clipedImage 已剪裁好的图片
* @param key 唯一key,通常是指URL。内部会进行MD5.
*/
+ (void)storeClipedImage:(UIImage *)clipedImage toDiskWithKey:(NSString *)key;
/**
* 获取本地已存储的所有已剪裁的缓存大小,单位为bytes
*
* @return 缓存大小
*/
+ (unsigned long long)imagesCacheSize;
/**
* 清除缓存
*/
+ (void)clearClipedImagesCache;
##UIImage+HYBImageCliped
目前提供了以下几种类型的API:
- 根据颜色生成图片,支持带任意圆角
- 单纯地放大或者缩小图片
- 直接生成带四个圆角的图片
- 生成带任意圆角的图片
- 直接生成圆形图片
###<a name="Version2.0.0">2.0.0新增:</a>增加添加图片边框属性
#pragma mark - 边框相关属属性,仅对生成圆形图片和矩形图片有效
/**
* 默认为1.0,当小于0时,不会添加边框,仅对生成圆形图片和矩形图片有效
*/
@property (nonatomic, assign) CGFloat hyb_borderWidth;
/**
* 当小于0时,不会添加边框。默认为0.仅对生成圆形图片和矩形图片有效
*/
@property (nonatomic, assign) CGFloat hyb_pathWidth;
/**
* 边框线的颜色,默认为[UIColor lightGrayColor],仅对生成圆形图片和矩形图片有效
*/
@property (nonatomic, strong) UIColor *hyb_borderColor;
/**
* Path颜色,默认为白色。仅对生成圆形图片和矩形图片有效
*/
@property (nonatomic, strong) UIColor *hyb_pathColor;
###根据颜色生成图片
下面是注释去掉后的API,可以根据颜色生成指定大小的图片,也可以设定生成带圆角的图片,当有圆角时,可以指定背景颜色,以处理图层混合问题:
+ (UIImage *)hyb_imageWithColor:(UIColor *)color toSize:(CGSize)targetSize;
+ (UIImage *)hyb_imageWithColor:(UIColor *)color toSize:(CGSize)targetSize cornerRadius:(CGFloat)cornerRadius;
+ (UIImage *)hyb_imageWithColor:(UIColor *)color
toSize:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRadius
backgroundColor:(UIColor *)backgroundColor;
###单纯放大或者缩小图片
这里注释已去掉,参数一是放大或者缩小图片至targetSize,参数二是表示是否要等比例放大或者缩小。当图片的宽、高比与targetSize的宽、高比差不多时,可以使用等比例;当相关很大时,如果使用等比例,将看不到一部分内容。
- (UIImage *)hyb_clipToSize:(CGSize)targetSize
isEqualScale:(BOOL)isEqualScale;
###直接生成带四个圆角的图片
当有圆角时,默认背景颜色为白色。为了解决图层混合所带来的性能问题,若白色与控件的背景颜色不一样,请手动指定背景颜色,以生成最适合场景的图片:
- (UIImage *)hyb_clipToSize:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRadius
backgroundColor:(UIColor *)backgroundColor
isEqualScale:(BOOL)isEqualScale;
/**
* 生成带圆角图片,默认为白色背景、isEqualScale为YES
*/
- (UIImage *)hyb_clipToSize:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRadius;
###生成带任意圆角的图片
图片也可以生成带任意圆角的,比如要生成上左、上右这两个圆角,可以这么写UIRectCornerTopLeft | UIRectCornerTopRight,中间直接使用 | 来连接即可:
- (UIImage *)hyb_clipToSize:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRadius
corners:(UIRectCorner)corners
backgroundColor:(UIColor *)backgroundColor
isEqualScale:(BOOL)isEqualScale;
/**
* 生成任意带圆角的图片,默认为白色背景,isEqualScale=YES
*/
- (UIImage *)hyb_clipToSize:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRadius
corners:(UIRectCorner)corners;
###直接生成圆形图片
在App中有很多是要显示成圆形的,因此使用下面的API来直接生成圆形图片是很方便的:
- (UIImage *)hyb_clipCircleToSize:(CGSize)targetSize
backgroundColor:(UIColor *)backgroundColor
isEqualScale:(BOOL)isEqualScale;
/**
* 生成圆形图片,默认为白色背景、isEqualScale为YES
*/
- (UIImage *)hyb_clipCircleToSize:(CGSize)targetSize;
##UIButton+HYBImageCliped
对于UIButton,目前提供了两种API:
- 根据状态设置图片
- 根据状态设置背景图片
###根据状态设置图片
这两个API只差一个参数targetSize,如果控件已经是明确的大小,可以直接使用不带targetSize参数的API。如果控件大小在设置图片前不确定,请手动明确指定要生成的图片的大小:
- (void)hyb_setImage:(id)image
forState:(UIControlState)state
cornerRadius:(CGFloat)cornerRadius
isEqualScale:(BOOL)isEqualScale;
- (void)hyb_setImage:(id)image
forState:(UIControlState)state
toSize:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRadius
isEqualScale:(BOOL)isEqualScale;
###根据状态设置背景图片
按钮是只可以有多种状态的,可设置图片,自然也可设置背景图片:
- (void)hyb_setBackgroundImage:(id)image
forState:(UIControlState)state
cornerRadius:(CGFloat)cornerRadius
isEqualScale:(BOOL)isEqualScale;
- (void)hyb_setBackgroundImage:(id)image
forState:(UIControlState)state
toSize:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRadius
isEqualScale:(BOOL)isEqualScale;
##UIView+HYBImageCliped
支持给任意视图添加带任意个圆角。使用起来也非常简单,看注释中的API介绍,带有小例子。如果有多个圆角,通过UIRectCornerTopLeft |UIRectCornerBottomRight这样来设置,中间用 | 连接,表示按位与的意思:
/**
* 给控件本身添加圆角,不是通过图片实现的。
*
* @param corner 多个圆角可通过UIRectCornerTopLeft | UIRectCornerTopRight这样来使用
* @param cornerRadius 圆角大小
*
* @Example
* [cornerView3 hyb_setImage:@"bimg8.jpg" cornerRadius:10 rectCorner:UIRectCornerTopLeft |UIRectCornerBottomRight isEqualScale:NO onCliped:^(UIImage *clipedImage) {
// 如果需要复用,可在异步剪裁后,得到已剪裁后的图片,可另行他用
}];
*/
- (void)hyb_addCorner:(UIRectCorner)corner cornerRadius:(CGFloat)cornerRadius;
/**
* corner为UIRectCornerAllCorners
*
* @Example
* 添加一个圆角:[view1 hyb_addCorner:UIRectCornerTopLeft cornerRadius:10];
*/
- (void)hyb_addCornerRadius:(CGFloat)cornerRadius;
##~~UIImageView+HYBImageCliped~~
2.0版本之后,已经添加至UIView+HYBImageCliped
这里提供的API也有好几种,与UIImage+HYBImageCliped有点类似:
- 将图片裁剪成指定大小(只是单纯地缩放)
- 直接生成圆形图片控件
- 生成四个带圆角图片来填充
- 生成任意圆角图片来填充
每个API后面都带有一个闭包回调,在剪裁完成时,会回传,外部可以根据需求处理。因为裁剪是异步去处理的,所以只好通过闭包回调!
###将图片裁剪成指定大小(只是单纯地缩放)
如果不需要添加任何圆角,只是想解决图片过大,与控件本身相差太大而千万像素不对齐的问题,可以直接使用下面的API:
- (UIImage *)hyb_setImage:(id)image size:(CGSize)targetSize isEqualScale:(BOOL)isEqualScale onCliped:(HYBClipedCallback)callback;
/**
* 使用指定的图片来填充图片。对于在填充图片之前,肯定有控件大小的,可以直接使用些API。
*/
- (UIImage *)hyb_setImage:(id)image isEqualScale:(BOOL)isEqualScale onCliped:(HYBClipedCallback)callback;
###直接生成圆形图像
在开发中,有很多是直接显示圆形头像、圆形图片的,下面的API可以直接生成:
- (UIImage *)hyb_setCircleImage:(id)image
size:(CGSize)targetSize
isEqualScale:(BOOL)isEqualScale
onCliped:(HYBClipedCallback)callback;
/**
* 使用指定的图片来填充,但是生成的是圆形图片,默认背景颜色为白色。当调用此API时,若控件本身
* 已经有确定的大小,则可以直接使用此API
*/
- (UIImage *)hyb_setCircleImage:(id)image
isEqualScale:(BOOL)isEqualScale
onCliped:(HYBClipedCallback)callback;
###生成四个带圆角图片来填充
如果显示带四个圆角,可以直接使用下面的API,高效生成带圆角的且与控件大小一致的图片来填充:
- (UIImage *)hyb_setImage:(id)image
size:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRaidus
backgroundColor:(UIColor *)backgroundColor
isEqualScale:(BOOL)isEqualScale
onCliped:(HYBClipedCallback)callback;
/**
* 生成带四个圆角的图片,默认使用白色背景、isEqualScale=YES
*/
- (UIImage *)hyb_setImage:(id)image
size:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRaidus
onCliped:(HYBClipedCallback)callback;
/**
* 生成带四个圆角的图片,默认使用白色背景、isEqualScale=YES。当调用此API时,若控件本身大小是确定的,才能起效!
*/
- (UIImage *)hyb_setImage:(id)image
cornerRadius:(CGFloat)cornerRaidus
onCliped:(HYBClipedCallback)callback;
###生成任意圆角图片来填充
如果出现特殊的场景,需要生成三个圆角之类的特殊情况,或者生成上左、下左圆角或者生成上右、下右这样的组合情况时,可以通过下面的API来生成:
- (UIImage *)hyb_setImage:(id)image
size:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRaidus
rectCorner:(UIRectCorner)rectCorner
backgroundColor:(UIColor *)backgroundColor
isEqualScale:(BOOL)isEqualScale
onCliped:(HYBClipedCallback)callback;
/**
* 生成任意圆角的图片来填充控件。默认背景色为白色、isEqualScale=YES
*/
- (UIImage *)hyb_setImage:(id)image
size:(CGSize)targetSize
cornerRadius:(CGFloat)cornerRaidus
rectCorner:(UIRectCorner)rectCorner
onCliped:(HYBClipedCallback)callback;
/**
* 生成任意圆角的图片来填充控件。默认背景色为白色。如果控件本身大小确定,
* 可以直接使用此API来生成与控件大小相同的图片来填充。
*/
- (UIImage *)hyb_setImage:(id)image
cornerRadius:(CGFloat)cornerRaidus
Related Skills
node-connect
331.2kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
81.5kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
331.2kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
81.5kCommit, push, and open a PR
