【原创】iOS图片预览(支持缩放和移动)

时间:2022-03-21 10:51:36

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图片预览(支持缩放和移动)的更多相关文章

  1. 使用canvas实现图片预览、缩放(压缩)以及生成文件下载

    参考 https://www.runoob.com/html/html5-canvas.html https://www.cnblogs.com/yuanzhiguo/p/8288822.html h ...

  2. iOS图片预览、放大缩小

    思路 图片预览,优先考虑基础控件UIImageView.UIButton 图片预览中可能需设置不同的mode,优先考虑UIImageView typedef NS_ENUM(NSInteger, UI ...

  3. 手机端图片预览和缩放js

    转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html 1.手机端的图片选择和预览 <input type="file&quot ...

  4. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6&plus;及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  5. Android 手势检测实战 打造支持缩放平移的图片预览效果(下)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39480503,本文出自:[张鸿洋的博客] 上一篇已经带大家实现了*的放大缩小图 ...

  6. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  7. js实现移动端图片预览:手势缩放, 手势拖动,双击放大&period;&period;&period;

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  8. JS 解决 IOS 中拍照图片预览旋转 90度 BUG

    上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...

  9. 手动实现图片预览-放大缩小全屏支持IE9以上

    #{extends '/Index/index.html' /} #{set title:'意见反馈' /} <script src="/public/mgr/javascripts/ ...

随机推荐

  1. Inside Kolla - 05 从 tools 目录开始

    从 tools 目录开始 在上一篇中已介绍了 Kolla 的源代码目录结构和各个目录中源代码的基本作用,现在开始深入到各个目录,介绍目录中的具体内容.每个人分析代码的思路和方法不同,会选择从不同的目录 ...

  2. ERP权限系统(七)

    添加链接权限的字段: //权限管理 n.Target = "MainFrame"; //折叠 TreeView1.Nodes.Add(n); n.Expanded = false;

  3. TCP&sol;IP详解学习笔记(10)-- DNS:域名系统

    1.DNS      DNS 是计算机域名系统(Domain Name System 或Domain Name Service) 的缩写,它是由解析器以及域名服务器组成的.域名服务器是指保存有该网络中 ...

  4. Castle框架中的IOC和AOP机制

    反转控制(IOC)和面向切面编程(AOP)技术作为当前比较流行的技术,其优势已受到广泛关注,但是这两项新技术在实际项目上的应用研究却很落后,而且在.NET平台下实现这两项技术没有形成可以广泛套用的框架 ...

  5. javascript 常用函数

    //获取元素的样式值. function getStyle(elem,name){ if(elem.style[name]){ return elem.style[name]; }else if(el ...

  6. npm package&period;json文件解读

    每个Nodejs项目的根目录下面,一般都会有一个package.json文件.该文件可以由npm init生成,定义了项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据). pa ...

  7. ActiveMQ的两种消息模式,主题、队列

    1.开发的模式流程如下: 2.队列模式Queue 如果生产者产生了100条消息,那么两个消费同时在的话,会分工合作来接收这100条消息.就是每个消费者接收到50条来处理. 3.主题模式topic 如果 ...

  8. 1&period;3Windows控制台的简单操作:

    目录: 1.控制台的打开 2.盘符的跳转 3.跳转到某个文件夹 4.展示文件 5.清屏 6.历史记录 7.拖动添加路径 8.自动补齐 9.正常退出 1.打开控制台:系统图标键 + R,输入cmd,按回 ...

  9. Simulating Mouse Events in JavaScript

    http://marcgrabanski.com/simulating-mouse-click-events-in-javascript/

  10. kafka的安装及基本使用

    1.安装zookeeper # 解压缩 [root@localhost zookeeper]# .tar.gz [root@localhost zookeeper]# zk_simple # 复制zo ...