项目中的一个优化案例,提升用户体验,对地铁线路图点击放大、缩小,并且点击位置居中;

正常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放大缩小点击位置并居中的更多相关文章

  1. IOS UIView 放大缩小

    /创建缩小了的视图myWeiBoImageVC = [[UIViewController alloc] init];myWeiBoImageVC.view.clipsToBounds = YES;my ...

  2. 猫猫学IOS(二)UI之button操作 点击变换 移动 放大缩小 旋转

    不多说,先上图片看效果,猫猫分享.必须精品 原创文章.欢迎转载.转载请注明:翟乃玉的博客 地址:viewmode=contents">http://blog.csdn.net/u013 ...

  3. AJ学IOS(02)UI之按钮操作 点击变换 移动 放大缩小 旋转

    不多说,先上图片看效果,AJ分享,必须精品 这个小程序主要实现点击方向键可以让图标上下左右动还有放大缩小以及旋转的功能,点击图片会显示另一张图片. 点击变换 其实用到了按钮的两个状态,再State C ...

  4. [jQuery]地图浏览:如何实现图片的放大缩小和点击之后的位置居中

    HTML代码: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis. ...

  5. 实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  6. Android 实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  7. 解决mxGraph放大/缩小在非IE浏览器下overlay图标位置不变化的问题

    首先要创建一个工具栏.并为工具栏中的放大.缩小button定义事件. <div id="toolbar" style="float:left;margin-top: ...

  8. scrollview里面多张图片,每张都能放大缩小

    http://blog.sina.com.cn/s/blog_5d68044001018s1n.html scrollview里面多张图片,每张都能放大缩小 - (void)viewDidLoad{  ...

  9. wxParse解析富文本内容使点击图片可以选中并实现放大缩小

    wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls. 经过排查发现:循环解析的富文本内容正 ...

随机推荐

  1. 用户管理-------userManage

      mysql的登录用户密码修改 step1: kill 系统了的mysql进程 step2: 用以下命令启动mysql,以不检查权限的方式启动 #mysqld_safe -skip-grant-ta ...

  2. sql server 中xml 数据类型的insert、update、delete

    近日对SQL操作XML作了如下整理: 1.插入 XML DECLARE @myDoc XMLSET @myDoc = '<Root> <ProductDescription Prod ...

  3. ubuntu10.04.4下安装JDK

    第一步:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html下载安装包(本来是可以通过 ...

  4. charles使用

    charles和fillder功能差不多,易用性更好些 1.安装和破解,替换charles.jar文件 2.手机代理: 设置charles 设置手机wifi将http代理修改成手动,填写本机ip地址和 ...

  5. NodeOS操作系统

    导读 我想大多数人听说过 Node.js,但是你听说过 NodeOS 吗?一个用 Node.js 写的操作系统,NodeOS 用 Linux 内核来处理各种底层任务,比如硬件通讯什么的,但是除此之外, ...

  6. dapper 学习

    上一篇, 提到Query<Test>查询的时候, 如果Test中包含自定义class, Dapper不会给自定义class完成映射, 而是直接给null, 其实是可以实现的, 答案就在下面 ...

  7. 如何换ionic里面的图标

    (转自http://www.zcool.com.cn/article/ZMTM4NDQw.html) 第一步,你把你的项目的SVG文件跟你自己做的图标的SVG文件都上到icomoon.io/app(上 ...

  8. javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数

    javascript函数一共可分为五类:    ·常规函数    ·数组函数    ·日期函数    ·数学函数    ·字符串函数    1.常规函数    javascript常规函数包括以下9个 ...

  9. DLL编程学习

    原文出处:http://www.blogjava.net/wxb_nudt/archive/2007/09/11/144371.html DLL编写教程 半年不能上网,最近网络终于通了,终于可以更新博 ...

  10. 用c#中的WebBrowser抢小米F码,抢小米手机以及自动测试实现原理

    首先是用c#中的WebBrowser控件打开登录网页,很简单,拖拽WebBrowser到Form上,然后给它的Url属性赋值.WebBrowser就会自动navigate to 这个网页. WebBr ...