【原创】iOS图片预览(支持缩放和移动)
1.传入图片
PreViewController.h:
#import <UIKit/UIKit.h> @interface PreViewController : UIViewController @property (nonatomic,strong) UIImage *preImage; @end
2.图片加载
PreViewController.m:
#import "PreViewController.h" @interface PreViewController () <UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *preView;//滚动视图 @property (nonatomic,assign) CGFloat visibleWidth;//有效显示宽度
@property (nonatomic,assign) CGFloat visibleHeight;//有效显示高度
@property (nonatomic,assign) CGFloat originalWidth;//图片居中显示原始宽度
@property (nonatomic,assign) CGFloat originalHeight;//图片居中显示原始高度 @property (nonatomic,strong) UIImageView *photoView;//图片视图 @end @implementation PreViewController - (void)viewDidLoad {
[super viewDidLoad]; [self loadPhoto];
} - (void)loadPhoto
{
self.originalWidth = ;
self.originalHeight = ;
self.visibleWidth = CGRectGetWidth([UIScreen mainScreen].bounds);
self.visibleHeight = CGRectGetHeight([UIScreen mainScreen].bounds) - [[UIApplication sharedApplication] statusBarFrame].size.height - self.navigationController.navigationBar.frame.size.height;//除去状态栏和导航栏的有效显示高度
CGFloat imageAspectRatio = self.preImage.size.width / self.preImage.size.height;//图片原始比例
CGFloat viewAspectRatio = self.visibleWidth / self.visibleHeight;//有效显示区域比例
if (imageAspectRatio > viewAspectRatio)
{
self.originalWidth = self.visibleWidth;
self.originalHeight = self.originalWidth / imageAspectRatio;
}
else
{
self.originalHeight = self.visibleHeight;
self.originalWidth = self.originalHeight * imageAspectRatio;
}
//居中
CGFloat originalX = (self.visibleWidth - self.originalWidth) / 2.0;
CGFloat originalY = (self.visibleHeight - self.originalHeight) / 2.0; self.photoView = [[UIImageView alloc] initWithImage:self.preImage];
self.photoView.frame = CGRectMake(originalX, originalY, self.originalWidth, self.originalHeight);//图片视图在滚动视图即contentView内的位置大小 //self.preView.contentSize = self.preImage.size;//设置为原始图片大小(可乘以倍数)
//缩放设置
//self.preView.zoomScale = 1.0;
//self.preView.minimumZoomScale = 1.0;
//self.preView.maximumZoomScale = self.preImage.size.width / self.originalWidth;
//优化
CGFloat contentWidth = MAX(self.preImage.size.width, self.visibleWidth);
CGFloat contentHeight = MAX(self.preImage.size.height, self.visibleHeight);
self.preView.contentSize = CGSizeMake(contentWidth, contentHeight);
self.preView.zoomScale = 1.0;
self.preView.minimumZoomScale = 1.0;
self.preView.maximumZoomScale = MAX(1.0, (self.preImage.size.width / self.originalWidth));
[self.preView addSubview:self.photoView];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.photoView;//返回缩放视图
} //根据缩放调整居中(当图片缩放到有效显示区域外则直接CGPointZero)
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
CGRect rect = self.photoView.frame;
CGFloat scaleWidth = MIN(self.visibleWidth, self.originalWidth * scale);
CGFloat widthDistance = self.visibleWidth - scaleWidth;
CGFloat scaleHeight = MIN(self.visibleHeight, self.originalHeight * scale);
CGFloat heightDistance = self.visibleHeight - scaleHeight;
rect.origin.x = widthDistance / 2.0;
rect.origin.y = heightDistance / 2.0;
[UIView animateWithDuration:0.25 animations:^{ self.photoView.frame = rect; }];
} @end
缩放过程中不会调整图片位置移动,只有在结束缩放后才动画调整居中显示,图片铺满有效显示区域后不存在居中问题,只要能显示全图即可。
此方法谈不上全面完善,只是目前看起来还不错,希望大家有好的方法可以分享~
转载请注明出处:http://www.cnblogs.com/HellerForever/p/6903534.html
【原创】iOS图片预览(支持缩放和移动)的更多相关文章
- 使用canvas实现图片预览、缩放(压缩)以及生成文件下载
参考 https://www.runoob.com/html/html5-canvas.html https://www.cnblogs.com/yuanzhiguo/p/8288822.html h ...
- iOS图片预览、放大缩小
思路 图片预览,优先考虑基础控件UIImageView.UIButton 图片预览中可能需设置不同的mode,优先考虑UIImageView typedef NS_ENUM(NSInteger, UI ...
- 手机端图片预览和缩放js
转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html 1.手机端的图片选择和预览 <input type="file" ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- Android 手势检测实战 打造支持缩放平移的图片预览效果(下)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39480503,本文出自:[张鸿洋的博客] 上一篇已经带大家实现了自由的放大缩小图 ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- JS 解决 IOS 中拍照图片预览旋转 90度 BUG
上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
- 手动实现图片预览-放大缩小全屏支持IE9以上
#{extends '/Index/index.html' /} #{set title:'意见反馈' /} <script src="/public/mgr/javascripts/ ...
随机推荐
- HTML5基础学习
分享一下html5的一些基础,小白上路! 一.html5基本结构 <!DOCTYPE html> ↑声明文档类型为HTML5文件. 文档声明,在HTML文档必不可少.且必须放在文档第一行 ...
- Mybatis(一) mybatis入门
学习了hibernate这个持久层框架之后,在来学习Mybatis简直是无压力,因为Mybatis入门门栏很低,如果学习过了hibernate的话,对于Mybatis的学习很简单了,如果没学习过hib ...
- JQuery分页插件封装(源码来自百度,自己封装)
最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运 ...
- 间谍网络——tarjan求SCC
洛谷传送门 看着这道题给人感觉就是tarjan求SCC,然而还得判断是否能控制全部间谍,这就得先从可以贿赂的点dfs一遍. 如果没有全部被标记了,就输出NO,再从没被标记的点里找最小的标号. 如果全被 ...
- Jquery对复选框CheckBox的操作
checkbox: 多选框 //获取选中值 checkbox:$("#checkbox_id").attr("value"): 多选框checkbox,打勾: ...
- Sencha+cordova 构造 华丽手机程序,并讲讲,在商用项目中经常用到的cordova插件(一)
采用 Sencha Architect 3 ,编辑设计,我只想说一个结论,jq能搞的 Sencha touch也能做到(只是 设计思路 更面向对象,学习知识量大点而已 ,不理解 MVC 就不用选了), ...
- 原生ajax实现http请求
1⃣️先简单了解一下HTTP协议: http是计算机通过网络进行通信的一种规则,它是一种无状态协议(不建立持久链接,直白点儿说就是请求响应完事儿之后,链接就断开) 2⃣️一个完整的http请求有 ...
- windows和linux双系统修改启动项
在windows系统的基础上再装linux系统的时候,电脑启动就会出现linux的启动引导项,默认的是进入linux.要使电脑默认进入windows只需要修改linux系统的启动引导文件(grub.c ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(十二)数据层优化-explain关键字及慢sql优化
本文提要 从编码角度来优化数据层的话,我首先会去查一下项目中运行的sql语句,定位到瓶颈是否出现在这里,首先去优化sql语句,而慢sql就是其中的主要优化对象,对于慢sql,顾名思义就是花费较多执行时 ...
- js倒计时,秒倒计时,天倒计时
按天倒计时 HTML代码1: <Script Language="JavaScript"> <!-- Begin var timedate= new Date(& ...