JPImageresizerView --- 简单易用、功能丰富的裁剪图片轮子

[复制链接]
来自: Rogue24 分类: iOS精品源码 上传时间: 2020-5-26 23:36:34
Tag:

项目介绍:

Github地址

效果图

简介(当前版本:1.3.9)

一个专门裁剪图片的轮子,简单易用,功能丰富(高自由度的参数设定、支持旋转和镜像翻转、多种样式选择等),能满足绝大部分图片裁剪的需求。

目前功能:
    1.能自适应裁剪区域的缩放;
    2.高自由度的参数设定,包括裁剪区域的间距、裁剪宽高比、是否自适应缩放等;
    3.支持最多8个拖拽方向的裁剪区域;
    4.支持上左下右的旋转;
    5.水平和垂直的镜像翻转;
    6.两种边框样式;
    7.支持圆框裁剪;
    8.自定义毛玻璃样式、边框颜色、背景颜色、遮罩透明度;
    9.自定义边框图片;
    10.可动态修改视图区域和裁剪区域间距,支持横竖屏切换。

正在努力着去实现的内容:
    1.Swift版本;
    2.裁剪视频画面;
    3.更多新的边框和遮罩样式;
    4.更多的参数设定;
    5.实现苹果自带的裁剪功能中的自由拖拽旋转方向的效果。

注意:由于autoLayout不利于手势控制,所以目前使用的是frame布局,暂不支持autoLayout。

如何使用

初始化

// 1.配置初始参数(更多可查看JPImageresizerConfigure的头文件)
/**
 * 部分配置参数:
 * 1.resizeImage:裁剪的图片
 * 2.blurEffect:毛玻璃样式
 * 3.borderImage:边框图片
 * 4.frameType & strokeColor:边框样式&颜色
 * 5.bgColor:背景色
 * 6.maskAlpha:遮罩透明度
 * 7.resizeWHScale:裁剪的宽高比
 * 8.contentInsets:裁剪区域与视图的间距
 */
JPImageresizerConfigure *configure = [JPImageresizerConfigure defaultConfigureWithResizeImage:image make:^(JPImageresizerConfigure *configure) {
    // 到这里已经有了默认参数值,可以在这里另外设置你想要的参数值(使用了链式编程方式)
    configure
    .jp_resizeImage([UIImage imageNamed:@"Kobe.jpg"])
    .jp_maskAlpha(0.5)
    .jp_strokeColor([UIColor yellowColor])
    .jp_frameType(JPClassicFrameType)
    .jp_contentInsets(contentInsets)
    .jp_bgColor([UIColor orangeColor])
    .jp_isClockwiseRotation(YES)
    .jp_animationCurve(JPAnimationCurveEaseOut);
}];

// 2.创建JPImageresizerView对象
JPImageresizerView *imageresizerView = [JPImageresizerView imageresizerViewWithConfigure:configure imageresizerIsCanRecovery:^(BOOL isCanRecovery) {
    // 可在这里监听到是否可以重置
    // 如果不需要重置(isCanRecovery为NO),可在这里做相应处理,例如将重置按钮设置为不可点或隐藏
    // 具体操作可参照Demo
    // 注意循环引用
} imageresizerIsPrepareToScale:^(BOOL isPrepareToScale) {
    // 可在这里监听到裁剪区域是否预备缩放至适合范围
    // 如果预备缩放(isPrepareToScale为YES),此时裁剪、旋转、镜像功能不可用,可在这里做相应处理,例如将对应按钮设置为不可点或隐藏
    // 具体操作可参照Demo
    // 注意循环引用
}];

// 3.添加到视图上
[self.view addSubview:imageresizerView];
self.imageresizerView = imageresizerView;

// 创建后也可以动态修改以上大部分参数(除了maskType和contentInsets)
self.imageresizerView.resizeImage = [UIImage imageNamed:@"Kobe.jpg"]; // 更换裁剪图片(默认带动画效果)
self.imageresizerView.resizeWHScale = 16.0 / 9.0; // 修改裁剪宽高比
self.imageresizerView.initialResizeWHScale = 0.0; // 默认为初始化时的resizeWHScale,调用 -recoveryByInitialResizeWHScale 方法进行重置则 resizeWHScale 会重置为该属性的值

// 注意:iOS11以下的系统,所在的controller最好设置automaticallyAdjustsScrollViewInsets为NO
// 不然imageresizerView会随导航栏或状态栏的变化产生偏移
if (@available(iOS 11.0, *)) {

} else {
    self.automaticallyAdjustsScrollViewInsets = NO;
}

横竖屏切换

screenswitching

// 需要用户去监听横竖屏的切换,或自己手动切换时,调用该方法刷新
// 1.updateFrame:刷新的Frame(例如横竖屏切换,传入self.view.bounds即可)
// 2.contentInsets:裁剪区域与主视图的内边距
// 3.duration:刷新时长(大于0即带有动画效果)
//【具体操作可参照Demo】
[self.imageresizerView updateFrame:self.view.bounds contentInsets:contentInsets duration:duration];

更改边框样式

简洁风格经典风格

// 目前只提供两种边框样式,分别是简洁样式JPConciseFrameType,和经典样式JPClassicFrameType
// 可在初始化或直接设置frameType属性来修改边框样式
self.imageresizerView.frameType = JPClassicFrameType;

自定义边框图片

拉伸模式平铺模式

// 使用自定义边框图片(例:平铺模式)
UIImage *tileBorderImage = [[UIImage imageNamed:@"jp_dotted_line"] resizableImageWithCapInsets:UIEdgeInsetsMake(14, 14, 14, 14) resizingMode:UIImageResizingModeTile];

// 设置边框图片与边线的偏移量(即CGRectInset,用于调整边框图片与边线的差距)
self.imageresizerView.borderImageRectInset = CGPointMake(-1.75, -1.75);

// 设置边框图片(若为nil则使用frameType的边框)
self.imageresizerView.borderImage = tileBorderImage;

切换裁剪宽高比

// 1.自定义参数切换
/**
 * resizeWHScale:    目标裁剪宽高比(0则为任意比例)
 * isToBeArbitrarily:切换之后 resizeWHScale 是否为任意比例(若为YES,最后 resizeWHScale = 0)
 * animated:         是否带动画效果
 */
[self.imageresizerView setResizeWHScale:(16.0 / 9.0) isToBeArbitrarily:YES animated:YES];

// 2.直接切换
self.imageresizerView.resizeWHScale = 1.0;
// 默认切换之后保存最新的 resizeWHScale,且自带动画效果,相当于:
[self.imageresizerView setResizeWHScale:1.0 isToBeArbitrarily:NO animated:YES];

圆切

圆切

// 设置圆切
// 设置后,resizeWHScale为1:1,半径为宽高的一半,边框的上、左、下、右的中部均可拖动。
[self.imageresizerView roundResize:YES];

// 还原矩形
// 只需设置一下resizeWHScale为任意值即可
self.imageresizerView.resizeWHScale = 0.0;

自定义毛玻璃样式、边框颜色、背景颜色、遮罩透明度

// 设置毛玻璃样式(默认带动画效果)
self.imageresizerView.blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

// 设置边框颜色(默认带动画效果)
self.imageresizerView.strokeColor = UIColor.whiteColor;

// 设置背景颜色(默认带动画效果)
self.imageresizerView.bgColor = UIColor.blackColor;

// 设置遮罩透明度(默认带动画效果)
// PS:跟毛玻璃互斥,当设置了毛玻璃则遮罩为透明
self.imageresizerView.maskAlpha = 0.5; // blurEffect = nil 才生效

// 一步设置毛玻璃样式、边框颜色、背景颜色、遮罩透明度
[self.imageresizerView setupStrokeColor:strokeColor blurEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark] bgColor:UIColor.blackColor maskAlpha: 0.5 animated:YES];

镜像翻转

效果图.gif

// 垂直镜像,YES->沿着Y轴旋转180°,NO->还原
BOOL isVerticalityMirror = !self.imageresizerView.verticalityMirror;
[self.imageresizerView setVerticalityMirror:isVerticalityMirror animated:YES];

// 水平镜像,YES->沿着X轴旋转180°,NO->还原
BOOL isHorizontalMirror = !self.imageresizerView.horizontalMirror;
[self.imageresizerView setHorizontalMirror:isHorizontalMirror animated:YES];

旋转

// 默认逆时针旋转,旋转角度为90°
[self.imageresizerView rotation];

// 若需要顺时针旋转可设置isClockwiseRotation属性为YES
self.imageresizerView.isClockwiseRotation = YES;

重置

// 重置为初始状态,方向垂直向上,可重置为不同的resizeWHScale

// 1.按当前 resizeWHScale 进行重置
/**
 * 使用该方法进行重置,裁剪框的宽高比会按照当前 resizeWHScale 的值进行重置
 */
[self.imageresizerView recoveryByCurrentResizeWHScale];

// isToBeArbitrarily:重置之后 resizeWHScale 是否为任意比例(若为YES,最后 resizeWHScale = 0)
BOOL isToBeArbitrarily = self.isToBeArbitrarily;   

// 2.按 initialResizeWHScale 进行重置
/**
 * initialResizeWHScale 默认为初始化时的 resizeWHScale,此后可自行修改 initialResizeWHScale 的值
 * 使用该方法进行重置,裁剪框的宽高比会按照 initialResizeWHScale 的值进行重置
 * 若 isToBeArbitrarily 为 NO,则重置之后 resizeWHScale = initialResizeWHScale
 */
[self.imageresizerView recoveryByInitialResizeWHScale:isToBeArbitrarily];
    
// 3.按 目标裁剪宽高比 进行重置
/**
 * 使用该方法进行重置,裁剪框的宽高比会按照 目标裁剪宽高比 进行重置
 * 若 isToBeArbitrarily 为 NO,则重置之后 resizeWHScale = targetResizeWHScale
 */
CGFloat imageresizeWHScale = self.imageresizerView.imageresizeWHScale; // 获取当前裁剪框的宽高比
[self.imageresizerView recoveryByTargetResizeWHScale:imageresizeWHScale isToBeArbitrarily:isToBeArbitrarily];

预览

// 预览模式:隐藏边框,停止拖拽操作,用于预览裁剪后的区域

// 1.默认自带动画效果
self.imageresizerView.isPreview = YES;

// 2.自定义是否带动画效果
[self.imageresizerView setIsPreview:YES animated:NO]

裁剪

// 裁剪过程是在子线程中执行,回调则切回主线程执行
// 如果是高清图片,调用前可添加HUD提示...
// compressScale:压缩比例(0.0 ~ 1.0),大于等于1.0按原图尺寸裁剪,小于等于0.0则返回nil
// 例:compressScale = 0.5,1000 x 500 --> 500 x 250

// 1.自定义压缩比例进行裁剪
[self.imageresizerView imageresizerWithComplete:^(UIImage *resizeImage) {
    // 裁剪完成,resizeImage为裁剪后的图片
    // 注意循环引用
} compressScale:0.7]; // 例:压缩为原图尺寸的70%

// 2.以原图尺寸进行裁剪
[self.imageresizerView originImageresizerWithComplete:^(UIImage *resizeImage) {
    // 裁剪完成,resizeImage为裁剪后的图片
    // 注意循环引用
}];

其他

// 锁定裁剪区域,锁定后无法拖动裁剪区域,NO则解锁
self.imageresizerView.isLockResizeFrame = YES;

// 旋转至水平方向时是否自适应裁剪区域大小
// 当图片宽度比图片高度小时,该属性默认YES,可手动设为NO
self.imageresizerView.isAutoScale = NO;

安装

JPImageresizerView 可通过CocoaPods安装,只需添加下面一行到你的podfile:

pod 'JPImageresizerView'

反馈地址

邮箱:zhoujianping24@hotmail.com
扣扣:184669029

相关源码推荐:

我来说两句
所有评论(0)
282 0 0
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )