Giter Site home page Giter Site logo

coderjackyhuang / hybimagecliped Goto Github PK

View Code? Open in Web Editor NEW
639.0 23.0 118.0 2.66 MB

开源高效处理圆角的扩展,包括UIImageView、UIView、UIButton、UIImage的扩展API,可根据图片颜色生成图片带任意圆角,可给UIButton根据不同状态处理图片。所有生成图片都不会引起离屏渲染且不会引起离屏、图层混合,支持添加图片边框

License: MIT License

Ruby 0.32% Objective-C 99.68%

hybimagecliped's Introduction

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,比对添加圆角后的效果:

image

优化后的多了好多的控件,所以效果没有达到60~

###Version 2.1.1

  • 优化内存,及时释放不用的图片

###Version 2.1.0

  • 增加带圆角的图片可以设置边框
  • 增加图片缓存到内存功能、异步读取、保存图片功能、异步清除缓存功能

image

###Version 2.0.0

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

效果如下:

image

详情查看:Version2.0.0新增API

###Version 1.1.1

  • fix bug
  • 优化内存

###Version 1.1.0

  • 增加剪裁的图片缓存管理类HYBImageClipedManager,用于解决缓存到内存引起内存增长很快的问题。详情查看**HYBImageClipedManager**

###Version 1.0.1

  • fix文档未上传的bug
  • 去掉不相关的注释
  • 增加demo

#Screenshot

image

#裁剪花费的时间

image

正常图片裁剪所花费的时间是挺小的,但是当图片过大时,花费时间也会越多。但是,裁剪前滚动列表是非常明显地卡,裁剪后滚动是明显的流畅。对于图片列表这个demo中,裁剪后FPS能平均在58左右,基本没有感觉到卡。

#如何使用

在使用之前,先引入头文件:

#import "HYBImageCliped.h"

##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:

  • 根据颜色生成图片,支持带任意圆角
  • 单纯地放大或者缩小图片
  • 直接生成带四个圆角的图片
  • 生成带任意圆角的图片
  • 直接生成圆形图片

###2.0.0新增:增加添加图片边框属性

#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
               rectCorner:(UIRectCorner)rectCorner
             isEqualScale:(BOOL)isEqualScale
                 onCliped:(HYBClipedCallback)callback;
/**
 * 生成任意圆角的图片来填充控件。默认背景色为白色、isEqualScale=YES。如果控件本身大小确定,
 * 可以直接使用此API来生成与控件大小相同的图片来填充。
 */
- (UIImage *)hyb_setImage:(id)image
             cornerRadius:(CGFloat)cornerRaidus
               rectCorner:(UIRectCorner)rectCorner
                 onCliped:(HYBClipedCallback)callback;

#网络下载图片处理

下面是一段通过SDWebImage来实现的异步下载图片然后剪裁后再显示的代码:

if (model.clipedImage) {
  self.imageView.image = model.clipedImage;
} else {
  __weak __typeof(self) weakSelf = self;
  UIImage *image = [UIImage imageNamed:@"img5.jpg"];
  [self.imageView sd_setImageWithURL:[NSURL URLWithString:model.url] placeholderImage:image options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
      
      // 将剪裁后的图片记录下来,下次直接使用
      model.clipedImage = [image hyb_clipToSize:weakSelf.imageView.bounds.size
                                   cornerRadius:12
                                backgroundColor:[UIColor blackColor]
                                   isEqualScale:NO];
      
      dispatch_async(dispatch_get_main_queue(), ^{
        weakSelf.imageView.image = model.clipedImage;
      });
    });
  }];
}

为了防止SDWebImage每次读取本地的,做了个判断,将裁剪后的图片放到模型中,下次直接使用即可!

#根据颜色生成图片使用

UIImageView *colorImageView = [[UIImageView alloc] init];
colorImageView.frame = CGRectMake(200, 200, 80, 100);
[self.view addSubview:colorImageView];
colorImageView.image = [UIImage hyb_imageWithColor:[UIColor greenColor] toSize:CGSizeMake(80, 100) cornerRadius:20];

#按钮使用

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(100, 200, 80, 80);
button.backgroundColor = [UIColor whiteColor];
[self.view addSubview:button];
[button hyb_setImage:@"img1.jpeg" forState:UIControlStateNormal cornerRadius:40 isEqualScale:YES];
[button hyb_setImage:@"bimg5.jpg" forState:UIControlStateHighlighted cornerRadius:40 isEqualScale:NO];

#UIImageView使用

生成圆形图片:

[imgView hyb_setCircleImage:@"img1.jpeg" isEqualScale:YES onCliped:^(UIImage *clipedImage) {
    
}];

#任意圆角

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(10, 100, 80, 80)];
view1.backgroundColor = [UIColor greenColor];

// 只加左上角
[view1 hyb_addCorner:UIRectCornerTopLeft cornerRadius:10];

[self.view addSubview:view1];
  
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 80, 80)];
view2.backgroundColor = [UIColor greenColor];

// 只添加右
[view2 hyb_addCorner:UIRectCornerTopRight cornerRadius:10];
[self.view addSubview:view2];

UIView *view3 = [[UIView alloc] initWithFrame:CGRectMake(200, 100, 80, 80)];
view3.backgroundColor = [UIColor greenColor];

// 只添加下左角和下右角
[view3 hyb_addCorner:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadius:10];
[self.view addSubview:view3];

#如何安装

支持Pod安装,可直接将下面的代码放到Podfile中:

pod 'HYBImageCliped', '~> 2.0.0'

或者到GITHUB直接下载【HYBImageCliped】将其中的Sources目录放入到工程!

#LICENSE

MIT LICENSE

hybimagecliped's People

Contributors

coderjackyhuang avatar devtll avatar halowang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hybimagecliped's Issues

代码简化

rect.origin.x += borderWidth / 2.0;
rect.origin.y += borderWidth / 2.0;
rect.size.width -= borderWidth;
rect.size.height -= borderWidth;

所有类似上面这样的代码,可以用一行代码代替:
CGRect innerRect = CGRectInset(rect, borderWidth / 2.0, borderWidth / 2.0);

还有-bezierPathWithRoundedRect:cornerRadius:这个方法不应该使用,我们平时对圆角要求不高用一用没什么问题,但是你这是封装。这个贝塞尔曲线的这个方法是有问题的,比如一个边长为200的正方形,理应半径为100才是彻底的圆,但事实上确是:当半径为66~100之间都是彻底的圆,只有小于66才是非整圆,也就是说它存在一个绘制整圆的临界值,然而这个临界值并非边长的一半。

还有一个问题:就是图片超出圆角的部分应该裁剪。你的示例当中设置的圆角都正好不会使得图片超过圆角,你可以设置图片大小为400,半径为40试一试

给imageview设置圆角,四个角出现黑色

_imageV_user_icon = [[UIImageView alloc] initWithFrame:CGRectMake(0, 15, 50, 50)]; [_imageV_user_icon setCenterX:SCREEN_WIDTH / 2.0]; [_imageV_user_icon hyb_addCornerRadius:25.0]; _imageV_user_icon.backgroundColor = whitlTestColor; [self.imageV_Header_BG addSubview:self.imageV_user_icon];
我在写用户信息的头像时候,用以上代码,就出现了四个角黑色。但是我在cell里,用同样的方法,缺没有出现黑色四个角,这是怎么回事?能帮忙解答一样吗?,下面是cell中的代码
self.imageVUserIcon = [[UIImageView alloc] init]; [self.imageVUserIcon hyb_addCornerRadius:15.0]; self.imageVUserIcon.backgroundColor = redTestColor; [self.contentView addSubview:self.imageVUserIcon]; [self.imageVUserIcon mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.contentView).offset(leftSpace); make.width.height.equalTo(@30); make.centerY.equalTo(self.contentView); }];

collectionView加圆角没有效果

[self.collectionView hyb_addCorner:UIRectCornerTopLeft |UIRectCornerTopRight |UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadius:8];

是否能设置不同大小的圆角

我看Demo中示例都是设置同样大小的圆角; 请问可以设置这样的圆角: 坐上和左下是10,右上和右下是5,这种样式的圆角.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.