IOS ScrollView放大缩小点击位置并居中
项目中的一个优化案例,提升用户体验,对地铁线路图点击放大、缩小,并且点击位置居中;
正常ScrollView 我们点击某一点比如屏幕右侧,想要点的位置向左移动到中心位置,很简单只有算出该点位置距中心位置的距离:point.x - contentOffset.x -SCREEN_WIDTH*0.5,然后问设置contentOffset.x+相应的距离即可。上下也同理.
但是这里要处理的双击 放大的同时,也要实现上面的效果。经过单步调试,查看
- (void)scrollViewDidScroll:(UIScrollView *)scrollView 代理方法的log:
NSLog(@"%f--%f -%f",scrollView.contentOffset.x,scrollView.contentOffset.y,scrollView.zoomScale);
发现移动移动图上的某一点到达屏幕的边界contentOffset.x变化与缩放倍数成正比!!!正比!!!
在根据简单版的居中原理的方法,应用到缩放后的ScrollView中,所有相关参数都*相应的缩放倍数!!正比关系记得。
下面是具体实现代码 :(PS 有更好更简单实现方法欢迎提供交流,本文描述有不当处欢迎指正谢谢!!)
- (void)showPointToCenterWithPoint:(CGPoint)pt withZoomScale:(CGFloat)zs{
[UIView animateWithDuration:0.3 animations:^{
__block CGPoint point = pt;
_baseScrollView.zoomScale = zs;
CGFloat offsetX = _baseScrollView.contentOffset.x*zs;
CGFloat offsetY = _baseScrollView.contentOffset.y*zs;
CGFloat contentW = _baseScrollView.contentSize.width;
CGFloat contentH = _baseScrollView.contentSize.height;
CGFloat x = ;
CGFloat y = ;
point = CGPointMake(point.x*zs, point.y*zs);
//右侧
if (offsetX + SCREEN_WIDTH < contentW && (point.x - offsetX) > SCREEN_WIDTH*0.5) {
//居中所要移动的距离:(point.x - offsetX)-SCREEN_WIDTH*0.5) ;移动后 还没有超过边界即满足居中
if ((offsetX + (point.x - offsetX)-SCREEN_WIDTH*0.5) + SCREEN_WIDTH < contentW) {
x = offsetX + (point.x - offsetX)- SCREEN_WIDTH*0.5;
}else{
//不满足居中
x = offsetX + (contentW - offsetX - SCREEN_WIDTH);
}
}else{
//左侧 满足居中
if (offsetX - (SCREEN_WIDTH*0.5 - (point.x - offsetX))>=) {
x = offsetX - (SCREEN_WIDTH*0.5 - (point.x - offsetX));
}else{
x = ;
}
}
//下侧
if (offsetY + SCREEN_HEIGHT < contentH && (point.y - offsetY) > SCREEN_HEIGHT*0.5) {
if ((offsetY + (point.y - offsetY)-SCREEN_HEIGHT*0.5) + SCREEN_HEIGHT < contentH) {
y = offsetY + (point.y - offsetY)- SCREEN_HEIGHT*0.5;
}else{
y = offsetY + (contentH - offsetY - SCREEN_HEIGHT);
}
}else{
if (offsetY - (SCREEN_HEIGHT*0.5 - (point.y - offsetY)) >= ) {
y = offsetY - (SCREEN_HEIGHT*0.5 - (point.y - offsetY));
}else{
y = ;
}
}
[_baseScrollView setContentOffset:CGPointMake(x, y)animated:NO];
} completion:^(BOOL finished) {
}];
}
IOS ScrollView放大缩小点击位置并居中的更多相关文章
- IOS UIView 放大缩小
/创建缩小了的视图myWeiBoImageVC = [[UIViewController alloc] init];myWeiBoImageVC.view.clipsToBounds = YES;my ...
- 猫猫学IOS(二)UI之button操作 点击变换 移动 放大缩小 旋转
不多说,先上图片看效果,猫猫分享.必须精品 原创文章.欢迎转载.转载请注明:翟乃玉的博客 地址:viewmode=contents">http://blog.csdn.net/u013 ...
- AJ学IOS(02)UI之按钮操作 点击变换 移动 放大缩小 旋转
不多说,先上图片看效果,AJ分享,必须精品 这个小程序主要实现点击方向键可以让图标上下左右动还有放大缩小以及旋转的功能,点击图片会显示另一张图片. 点击变换 其实用到了按钮的两个状态,再State C ...
- [jQuery]地图浏览:如何实现图片的放大缩小和点击之后的位置居中
HTML代码: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis. ...
- 实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置
前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...
- Android 实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置
前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...
- 解决mxGraph放大/缩小在非IE浏览器下overlay图标位置不变化的问题
首先要创建一个工具栏.并为工具栏中的放大.缩小button定义事件. <div id="toolbar" style="float:left;margin-top: ...
- scrollview里面多张图片,每张都能放大缩小
http://blog.sina.com.cn/s/blog_5d68044001018s1n.html scrollview里面多张图片,每张都能放大缩小 - (void)viewDidLoad{ ...
- wxParse解析富文本内容使点击图片可以选中并实现放大缩小
wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls. 经过排查发现:循环解析的富文本内容正 ...
随机推荐
- Javascript 事件对象(六)事件默认行为
事件默认行为: 阻止默认事件普通写法:return false;屏蔽右键菜单 : oncontextmenu <!DOCTYPE HTML> <html> <head& ...
- Voreen (一) GPU Raycast主流程
最近看了下Voreen这个开源体绘制快速原型开发包.Voreen里面集合了不少体绘制的基本算法,还是值得研究和试验图像显示效果的.今天第一篇以它自带工程为例,介绍下DICOM数据读取和GPU Rayc ...
- 添加jre/jdk A java Exception occurred
- iOS后台挂起程序 当程序到后台后,继续完成Long-Running Task 任务
我们知道,到我们程序从前台退到后台(安home)键后,将执行程序的委托方法. // 当应用程序掉到后台时,执行该方法 - (void)applicationDidEnterBackground:(UI ...
- Sublime Text 3 简体中文汉化包
Sublime Text 3下载 不用说是上官方下载地址:http://www.sublimetext.com/3 Sublime Text 3 简体中文汉化包使用方法 1.将上面要求下载的subli ...
- Weblogic新增域(可以配置新端口)
操作系统 :Linux version 2.6.32-504.el6.x86_64 Weblogic Server :11g 一.Weblogic新增域(可以配置新端口) 以weblogic用户登录 ...
- 通过全局getApp获取全局实例获取数据
学习是每一个人都要面对的铁一般的事实,不进则退.学习同样讲究途径和方法,面对知识这个巨人,我们永远不会有成年的那一刻,但我们可以让自己毕生尽可能地吸取更多有价值的信息,好让自己人生充满各种“意义”存在 ...
- SVN 错误
SVN 的基础安装 网上查 用户账号简单的配置 1.进入 ./conf/passwd 账号创建 [users] Colin = rw Colin1 = r 2.进入 ./conf/a ...
- mysql数据库性能篇
慢查询:超过设定时间的SQL语句会被记录到指定文件内 1.观察mysql慢查询默认的时间(默认10秒) show variables like 'long%'; 2.修改慢查询设定时间 set lon ...
- odoo server命令行以及配置文件
odoo server 启动时 def main(args): check_root_user() odoo.tools.config.parse_config(args) check_postgre ...