iOS图片预览、放大缩小
思路
图片预览,优先考虑基础控件UIImageView、UIButton
图片预览中可能需设置不同的mode,优先考虑UIImageView
typedef NS_ENUM(NSInteger, UIViewContentMode) {
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,
UIViewContentModeScaleAspectFill,
UIViewContentModeRedraw,
UIViewContentModeCenter,
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
}
图片放大、缩小的思路:1. 手势+frame 2.scrollview的zoomScale
很愉快的决定选择2,不要问为什么,因为我懒,能用系统提供的,坚决不折腾
上菜
- 设置页面属性
@property (nonatomic, strong) UIScrollView *mScroll;
@property (nonatomic, strong) UIImageView *imgInfo;
- 界面初始化
self.mScroll = [[UIScrollView alloc] initWithFrame:CGRectZero];
self.mScroll.backgroundColor = [UIColor colorWithHexs:0x3f3f3f];
self.mScroll.maximumZoomScale = 3.0;
self.mScroll.minimumZoomScale = 1;
self.mScroll.delegate = self;
self.mScroll.showsVerticalScrollIndicator = NO;
self.mScroll.showsHorizontalScrollIndicator = NO;
[self.view addSubview:self.mScroll];
[self.mScroll mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.preView);
}]; self.imgInfo = [[UIImageView alloc] initWithFrame:CGRectZero];
self.imgInfo.clipsToBounds = YES;
[self.imgInfo setUserInteractionEnabled:YES];
self.imgInfo.backgroundColor = [UIColor colorWithHexs:0x3f3f3f];
[self.mScroll addSubview:self.imgInfo];
[self.imgInfo mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.mScroll);
make.width.equalTo(self.mScroll);
}];
其中maximumZoomScale与minimumZoomScale表示可缩放程度
- 顺带加个双击手势,比如双击可放大,再放大,再缩小
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapHandlerTwice)];
tap.numberOfTapsRequired = 2;
[self.imgInfo addGestureRecognizer:tap];
- double click直接控制缩放
- (void)tapHandlerTwice {
if (self.mScroll.zoomScale < 2) {
[self.mScroll setZoomScale:2];
} else if (self.mScroll.zoomScale < 3) {
[self.mScroll setZoomScale:3];
} else {
[self.mScroll setZoomScale:1];
}
}
- UIScrollViewDelegate设置scrollview的Zooming View
#pragma mark - UIScrollViewDelegate
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return self.imgInfo;
}
Game Over
iOS图片预览、放大缩小的更多相关文章
- 手动实现图片预览-放大缩小全屏支持IE9以上
#{extends '/Index/index.html' /} #{set title:'意见反馈' /} <script src="/public/mgr/javascripts/ ...
- 【VUE】图片预览放大缩小插件
From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...
- HTML5图片预览 放大
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 微信企业号办公系统-图片预览放大功能-previewImage
在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调 ...
- 【原创】iOS图片预览(支持缩放和移动)
1.传入图片 PreViewController.h: #import <UIKit/UIKit.h> @interface PreViewController : UIViewContr ...
- JS微信网页使用图片预览(放大缩小)
前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...
- Ionic实战三:Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览
这个demo的主要功能有两个,一个是首页的导航向上拉动会浮动在最上面的效果,另一个就是我们平时非常实用的功能,就是图片预览功能 点击可以放大图片,并且可以左右滑动,还可以双击放大缩小图片以及双手指控制 ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- JS 解决 IOS 中拍照图片预览旋转 90度 BUG
上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
随机推荐
- Centos7 安装RabbitMQ 3.6.1
如果你看过前两章对RabbitMQ已经有了一定了解,现在已经摩拳擦掌,来吧动手吧! 用什么系统 本文使用的是Centos7,为了保证对linux不太熟悉的伙伴也能轻松上手(避免折在安装的路上),下面是 ...
- php之__DIR__,__FILE__,getcwd()的区别。
__DIR__ 在哪个脚本文件里面出现,就显示当前脚本的目录,不包含文件名.假如目录A下的1.php包含了这个魔术常量,这个文件被目录B下的2.php调用了.那么__DIR__返回的值是多少呢?返回的 ...
- NodeRED - 全局变量的使用笔记
NodeRED - 全局变量的使用笔记 global global.get(..) :获取全局范围的上下文属性 global.set(..) :设置全局范围的上下文属性 global.keys(..) ...
- unix环境高级编程第四章笔记
文件和目录 start fstart lstart函数 一旦给出pathname, start函数就返回了与此命名文件有关的信息结构 #include <sys/start> int st ...
- Codeforces Round #648 (Div. 2) F. Swaps Again
题目链接:F.Swaps Again 题意: 有两个长度为n的数组a和数组b,可以选择k(1<=k<=n/2)交换某一个数组的前缀k和后缀k,可以交换任意次数,看最后是否能使两个数组相等 ...
- Codeforces Round #649 (Div. 2) C. Ehab and Prefix MEXs (构造,贪心)
题意:有长度为\(n\)的数组\(a\),要求构造一个相同长度的数组\(b\),使得\({b_{1},b_{2},....b_{i}}\)集合中没有出现过的最小的数是\(a_{i}\). 题解:完全可 ...
- AtCoder Beginner Contest 173 C - H and V (二进制枚举)
题意:有一张图,.表示白色,#表示黑色,每次可以将多行和多列涂成红色(也可不涂),问有多少种方案,使得剩下黑点的个数为\(k\). 题解:又学到了新的算法qwq,因为这题的数据范围很小,所以可以用二进 ...
- Java_web-response的outputStream和Write输出数据的问题
解决方法: 把方法换成这个也可以: 因为浏览器也是一个html解析工具,所以认识html文本 下面这个直接write(1),那么浏览器上就会显示L 这个样子在浏览器上看到的就是1: 字节流输出: 这个 ...
- Explain 索引优化分析
Explain 语法 # 语法 explain + DQL语句 mysql> explain select * from city where countrycode ='CHN' or cou ...
- Kubernets二进制安装(12)之部署Node节点服务的kube-Proxy
kube-proxy是Kubernetes的核心组件,部署在每个Node节点上,它是实现Kubernetes Service的通信与负载均衡机制的重要组件; kube-proxy负责为Pod创建代理服 ...