pinch zoom是移动应用中非常实用的手势,尤其用于图片浏览。
遗憾的是sencha touch2仍然没有提供现成的官方控件。
人肉了下,找到以下资源:
1.https://market.sencha.com/extensions/pinch-zoom-image
测试了下这个plug-in,存在明显的性能问题,缩放和平移均存在响应迟滞。
2.https://github.com/SunboX/ST2_ImageViewer
有关此控件的讨论,参见这篇帖子:
http://www.sencha.com/forum/showthread.php?197903-Pinch-Image-with-carousel-and-working-fine/page6
此控件响应流畅,但存在一个明显的不足,就是当pinchEnd时,总是会出现画面闪烁。
认真读了相关代码,line254
onImagePinchEnd : function(ev) { var me = this; // set new translation if (me.scale == me.baseScale) { // move to center me.setTranslation(me.translateBaseX, me.translateBaseY); } else { //Resize to init size like ios if (me.scale < me.baseScale && me.getResizeOnLoad()) { me.resetZoom(); return; } // calculate rescaled origin me.originReScaledImgX = me.originScaledImgX * (me.scale / me.startScale); me.originReScaledImgY = me.originScaledImgY * (me.scale / me.startScale); // maintain zoom position me.setTranslation(me.originViewportX - me.originReScaledImgX, me.originViewportY - me.originReScaledImgY); } // reset origin and update transform with new translation me.setOrigin(0, 0); me.applyTransform(); // adjust scroll container me.adjustScroller(); },
分析结论如下:
pinch end结束时出现闪烁,是由于直接将transform缩放之后的图片,由改变宽高、然后scrollto局部。
这中间改变宽高,再scrollto,始终对一个图片操作,而这个过程,图片经历了位置、尺寸的变化。
改进的思路如下:
要避免闪烁,必须做到,在图片的整个改变中,显示在屏幕前的始终是同样的画面,那么改变只能在后面发生,可以利用background-image作为切换的遮羞布。
具体步骤是:
- 通过设置底图,先将底图变化为与当前局部一致;
- 隐藏图片,显示底图,由于两者一致,不会出现闪烁;
- 变化图片坐标,scrollto局部;
- 显示图片;
- 隐藏底图;
- 整个过程最前面的局部图始终保持不变,因此去掉闪烁。
改进后的代码:
onImagePinchEnd : function(ev) { var me = this; // set new translation if (me.scale == me.baseScale) { // move to center me.setTranslation(me.translateBaseX, me.translateBaseY); } else { //Resize to init size like ios if (me.scale < me.baseScale && me.getResizeOnLoad()) { me.resetZoom(); return; } // calculate rescaled origin me.originReScaledImgX = me.originScaledImgX * (me.scale / me.startScale); me.originReScaledImgY = me.originScaledImgY * (me.scale / me.startScale); // maintain zoom position me.setTranslation(me.originViewportX - me.originReScaledImgX, me.originViewportY - me.originReScaledImgY); } //c4w var scale=me.scale; var bw = me.imgWidth * scale; var bh = me.imgHeight * scale; var bs=bw+'px '+bh+'px'; var x = 0; if (me.scrollX!=0) { x = me.scrollX; }else{ x = me.translateX; } var y = 0; if (me.scrollY!=0) { y = me.scrollY; }else{ y = me.translateY; } var px=x+'px '+y+'px'; me.element.setStyle({ backgroundImage : 'url(' + me.getImageSrc() + ')', backgroundAttachment: 'fixed', backgroundPosition : px, backgroundSize: bs, backgroundRepeat : 'no-repeat' }); me.imgEl.dom.style.visibility ='hidden'; //c4w //me.ds=px+"\n"+bs; setTimeout(function() { me.setOrigin(0, 0); me.applyTransform(); // adjust scroll container me.adjustScroller(); me.imgEl.dom.style.visibility ='visible'; me.element.setStyle({ backgroundImage : 'none' }); }, 50); //c4wend },
在iphone4上做了测试,效果令人满意。
相关推荐
web 应用的 JavaScript 框架,它基于 HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web 应用,它提供了丰富的华丽的控件和强大的功能,...
Sencha Touch开发的项目《般若人生》源码
sencha touch中文翻译文档,包含sencha touch入门基础和一些控件的使用说明
sencha touch 应用案例 sencha touch 案例 一个完整的sencha touch 应用案例 移动WEB社区开发的日志案例 非常不错!
sencha touch 折叠list
MAC OS 下sencha touch +cordova 开发环境配置。可以将H5 hybird 应用打包成IOS 应用。
sencha touch 2.4.0最新版 原版包下载
sencha touch cookbook 英文高清文字版 !
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
sencha touch list demo
sencha touch动态加载组件及容器内容,防止加载时间过长的问题
sencha touch 是一个移动平台UI开发框架,可以实现各种绚丽的页面效果
讲其解压到Tomcat的webAPP目录下,即可访问
这是我做的一个sencha touch 的项目,测试并能运行,希望对大家有帮助
sencha touch grid
sencha touch2移动开发框架,ajax获取数据
《Sencha Touch 权威指南》陆凌牛著的源码包
sencha touch 2 实现的贪吃蛇 希望对大家有所帮助