快速了解
完整资料
资料已展开关于 JPImageresizerView
简介(当前版本:1.5.0)
一个专门裁剪图片的轮子,简单易用,功能丰富(高自由度的参数设定、支持旋转和镜像翻转、多种样式选择等),能满足绝大部分图片裁剪的需求。

复制代码
目前功能:
1.能自适应裁剪区域的缩放;
2.高自由度的参数设定,包括裁剪区域的间距、裁剪宽高比、是否自适应缩放等;
3.支持最多8个拖拽方向的裁剪区域;
4.支持上左下右的旋转;
5.水平和垂直的镜像翻转;
6.两种边框样式;
7.支持圆框裁剪;
8.自定义毛玻璃样式、边框颜色、背景颜色、遮罩透明度;
9.自定义边框图片;
10.可动态修改视图区域和裁剪区域间距,支持横竖屏切换;
11.可自定义蒙版图片裁剪。
正在努力着去实现的内容:
1.Swift版本;
2.裁剪视频画面;
3.更多新的边框和遮罩样式;
4.更多的参数设定;
5.实现苹果自带的裁剪功能中的自由拖拽旋转方向的效果。
注意:由于autoLayout不利于手势控制,所以目前使用的是frame布局,暂不支持autoLayout。
如何使用
初始化
objc
复制代码
// 1.配置初始参数(更多可查看JPImageresizerView的头文件)
/**
* 部分可配置参数注释:
- resizeImage:裁剪的图片
- blurEffect:毛玻璃样式
- borderImage:边框图片
- frameType & strokeColor:边框样式&颜色
- bgColor:背景色
- maskAlpha:遮罩透明度
- resizeWHScale:裁剪的宽高比
- contentInsets:裁剪区域与视图的间距
- maskImage:蒙版图片
*/
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;
// 创建后均可动态修改configure的参数
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;
}
自定义蒙版图片

objc
复制代码
// 设置蒙版图片(目前仅支持png图片)
self.imageresizerView.maskImage = [UIImage imageNamed:@"love.png"];
// 移除蒙版图片
self.imageresizerView.maskImage = nil;
// 可以设置蒙版图片是否可以任意比例拖拽
self.imageresizerView.isArbitrarilyMask = YES;

PS:如果使用了蒙版图片,那么最后裁剪出来的是png图片,因此裁剪后体积有可能会比原本的图片更大。
横竖屏切换

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


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


objc
复制代码
// 使用自定义边框图片(例:平铺模式)
UIImage *tileBorderImage = [[UIImage imageNamed:@"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;
切换裁剪宽高比

objc
复制代码
// 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];
圆切

objc
复制代码
// 设置圆切
// 设置后,resizeWHScale为1:1,半径为宽高的一半,边框的上、左、下、右的中部均可拖动。
[self.imageresizerView roundResize:YES];
// 还原矩形
// 只需设置一下resizeWHScale为任意值即可
self.imageresizerView.resizeWHScale = 0.0;
自定义毛玻璃样式、边框颜色、背景颜色、遮罩透明度
objc
复制代码
// 设置毛玻璃样式(默认带动画效果)
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];
镜像翻转

objc
复制代码
// 1.垂直镜像,YES->沿着Y轴旋转180°,NO->还原
BOOL isVerticalityMirror = !self.imageresizerView.verticalityMirror;
self.imageresizerView.verticalityMirror = isVerticalityMirror;
// 默认自带动画效果,相当于:
[self.imageresizerView setVerticalityMirror:isVerticalityMirror animated:YES];
// 2.水平镜像,YES->沿着X轴旋转180°,NO->还原
BOOL isHorizontalMirror = !self.imageresizerView.horizontalMirror;
self.imageresizerView.horizontalMirror = isHorizontalMirror;
// 默认自带动画效果,相当于:
[self.imageresizerView setHorizontalMirror:isHorizontalMirror animated:YES];
旋转
objc
复制代码
// 默认逆时针旋转,旋转角度为90°
[self.imageresizerView rotation];
// 若需要顺时针旋转可设置isClockwiseRotation属性为YES
self.imageresizerView.isClockwiseRotation = YES;
重置
objc
复制代码
// 重置为初始状态,方向垂直向上,可重置为不同的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 recoveryToTargetResizeWHScale:imageresizeWHScale isToBeArbitrarily:isToBeArbitrarily];
// 4.重置回圆切状态
/**
* 使用该方法进行重置,以圆切状态回到最初状态
* 重置之后 resizeWHScale = 1
*/
[self.imageresizerView recoveryToRoundResize];
// 5.以蒙版图片重置
/**
* 使用该方法进行重置,以蒙版图片的宽高比作为裁剪宽高比回到最初状态
* 重置之后 resizeWHScale = maskImage.size.width / maskImage.size.height
*/
[self.imageresizerView recoveryByCurrentMaskImage]; // 使用当前蒙版图片
[self.imageresizerView recoveryToMaskImage:[UIImage imageNamed:@"love.png"]]; // 指定蒙版图片
预览
objc
复制代码
// 预览模式:隐藏边框,停止拖拽操作,用于预览裁剪后的区域
self.imageresizerView.isPreview = YES;
// 默认自带动画效果,相当于:
[self.imageresizerView setIsPreview:YES animated:YES];
裁剪
objc
复制代码
// 裁剪过程是在子线程中执行,回调则切回主线程执行
// 如果是高清图片,调用前可添加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为裁剪后的图片
// 注意循环引用
}];
其他
objc
复制代码
// 锁定裁剪区域,锁定后无法拖动裁剪区域,NO则解锁
self.imageresizerView.isLockResizeFrame = YES;
// 旋转至水平方向时是否自适应裁剪区域大小
// 当图片宽度比图片高度小时,该属性默认YES,可手动设为NO
self.imageresizerView.isAutoScale = NO;
各版本的主要更新
| 版本 | 更新内容 |
|---|---|
| 1.5.0 | 1. 新增自定义蒙版图片功能,从而实现可自定义任意裁剪区域; 2. 修复了经旋转重置后裁剪宽高比错乱的问题; 3. 优化了旋转、翻转的过渡动画。 |
| 1.4.0 | 1. 新增isBlurWhenDragging属性:拖拽时是否遮罩裁剪区域以外的区域; 2. 新增isShowGridlinesWhenDragging属性:拖拽时是否能继续显示网格线(frameType 为 JPClassicFrameType 且 gridCount > 1 才显示网格); 3. 新增gridCount属性:每行/列的网格数(frameType 为 JPClassicFrameType 且 gridCount > 1 才显示网格)。 |
| 1.3.8~1.3.9 | 1. 适配横竖屏切换; 2. 废除verBaseMargin和horBaseMargin属性,统一使用contentInsets设置裁剪区域与视图的间距; 3. 优化代码,并减少裁剪误差。 |
| 1.2.1~1.3.6 | 1. 新增圆切样式; 2. 中间的点/块可隐藏; 3. 可动态切换图片、设置边框颜色和背景颜色,可设置是否带有动画效果; 4. 毛玻璃效果可设置系统现有的所有效果; 5. 适配深色/浅色模式的切换(前提是颜色使用的是系统的动态颜色); 6. 优化逻辑。 |
| 1.2.0 | 1. 固定比例的裁剪宽高比,裁剪边框也均可拖拽8个方向; 2. 优化了显示/隐藏毛玻璃效果。 |
| 1.1.2~1.1.5 | 1. 优化计算逻辑; 2. 初始化时可自定义最大缩放比例(maximumZoomScale)。 |
| 1.1.1 | 1. 新增 imageresizeWHScale 属性,获取当前裁剪框的宽高比; 2. 新增 isToBeArbitrarily 关键字,用于设置裁剪宽高比、重置之后 resizeWHScale 是否为任意比例(若为YES,最后 resizeWHScale = 0),即可以继续任意拖拽裁剪框,对设置裁剪宽高比、重置等方法进行了修改,详情请查看Demo; 3. 直接设置 resizeWHScale、verticalityMirror、horizontalMirror、isPreview 默认自带动画效果(isAnimated = YES,其中 resizeWHScale 的 isToBeArbitrarily = NO)。 |
| 1.1.0 | 1. 现在可以自定义边框图片,新增borderImage(边框图片)和borderImageRectInset(边框图片与边线的偏移量)接口用于设置自定义边框图片; 2. 优化计算逻辑。 |
| 1.0.1~1.0.4 | 1. recovery方法更名为recoveryByInitialResizeWHScale,意思按initialResizeWHScale进行重置,避免误导。 2. 裁剪后不再按参照宽度来进行压缩了,现在按比例来进行压缩(现在使用scale,referenceWidth已废除); 3. 优化了裁剪和压缩逻辑; |
| 1.0.0 | 1. 新增了isPreview属性,用于预览裁剪后的区域; 2. 新增了initialResizeWHScale属性,初始裁剪宽高比,重置时resizeWHScale会重置为该属性的值; 3. 新增recoveryByCurrentResizeWHScale方法,重置时不改变resizeWHScale; 4. 新增recoveryByResizeWHScale:方法,重置时可修改成任意resizeWHScale; 5. 修复了不断切换resizeWHScale时不断缩放的问题; 6. 优化了切换resizeWHScale、手指拖动时的交互效果。 |
| 0.5.1~0.5.3 | 1. 修复了设置镜像后的旋转、裁剪错乱问题; 2. 修复了切换裁剪比例时的缩放错误问题; 3. 移除isRotatedAutoScale属性(该属性会导致多处错误,且不利于优化,所以决定移除); 4. 优化计算逻辑。 |
| 0.4.9 | 新增edgeLineIsEnabled属性:用于设置裁剪框边线能否进行对边拖拽,只有当裁剪宽高比(resizeWHScale |
适合的使用方向
简介(当前版本:1.5.0)
一个专门裁剪图片的轮子,简单易用,功能丰富,能满足绝大部分图片裁剪的需求
如何使用
一个专门裁剪图片的轮子,简单易用,功能丰富,能满足绝大部分图片裁剪的需求
初始化
一个专门裁剪图片的轮子,简单易用,功能丰富,能满足绝大部分图片裁剪的需求
收录线索
appIOS截图模板 / 素材
资料说明
内容根据公开资料整理;版本、兼容性与服务状态请以官网最新说明为准。
