`

sencha touch的pinch zoom控件

 
阅读更多

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上做了测试,效果令人满意。

 

 

 

 

 

 

分享到:
评论

相关推荐

    touch-docs-2.2.1.zip(senchaTouch 离线API参考文档)

    Sencha Touch 是一款专为移动设备开发的前端框架,它提供了丰富的组件和API,使得开发者可以轻松构建跨平台的触控应用。这个压缩包“touch-docs-2.2.1.zip”包含了Sencha Touch 2.2.1版本的离线API参考文档,对于...

    Sencha 和 Sencha Touch 简介

    web 应用的 JavaScript 框架,它基于 HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web 应用,它提供了丰富的华丽的控件和强大的功能,...

    Sencha Touch开发的项目《般若人生》源码

    《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的JavaScript框架,专门用于构建跨平台的触屏友好型Web应用程序。它提供了丰富的UI组件和强大的数据管理工具,使得开发者能够...

    sencha touch 登陆界面

    Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。"sencha touch 登陆界面"这个主题,主要涉及的是如何使用Sencha Touch来设计和实现一...

    Sencha Touch in Action

    《Sencha Touch in Action》是一本关于使用Sencha Touch进行跨平台移动开发的书籍,它详细介绍了Sencha Touch框架的使用方法和技巧。Sencha Touch是一个利用HTML5、CSS3和JavaScript创建移动Web应用程序的框架,它是...

    一个完整的sencha touch 应用案例

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。这个压缩包文件包含了创建一个完整的Sencha Touch 应用所需的基本元素,让我们逐一解析这些...

    sencha touch项目源码

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件和API,用于构建交互式的、响应式的Web应用程序。这个项目源码是基于Sencha Touch开发的一个实例,通过研究这个项目,我们可以深入理解Sencha ...

    sencha touch在VScode上的插件

    Sencha Touch 是一款用于构建移动应用的前端框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者可以创建交互性强、性能优异的触屏应用程序。VSCode(Visual Studio Code)是微软开发的一款广受欢迎的源...

    sencha touch 2.4.0最新版

    Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架,它使得开发者能够构建功能丰富的、响应式的Web应用程序,这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...

    api.zip_sencha _sencha touch api_sencha touch2 api

    标题中的"api.zip_sencha _sencha touch api_sencha touch2 api"表明这是一个关于Sencha Touch API的压缩文件集合,可能包含了Sencha Touch和Sencha Touch 2两个版本的API文档。 **Sencha Touch基础知识** Sencha ...

    sencha touch list demo

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库,用于构建高性能的触屏Web应用。在“sencha touch list demo”中,我们主要关注的是Sencha Touch中的列表(List)组件,这是一个核心且常用的...

    sencha touch中文翻译文档

    Sencha Touch是一款强大的JavaScript框架,专门用于构建移动Web应用程序。它提供了一套完整的UI组件和交互功能,使得开发者能够创建出具有原生应用体验的触摸友好型应用。这个"Sencha Touch中文翻译文档"是针对...

    Sencha Touch2环境搭建

    Sencha Touch 2是一款专为移动设备开发的前端框架,用于构建高性能的触控应用程序。它提供了丰富的组件库,使得开发者能够轻松创建出与原生应用相似的用户体验。本篇文章将详细阐述如何搭建Sencha Touch 2的开发环境...

    senchaTouch和fusioncharts结合的实例

    Sencha Touch 和 FusionCharts 的结合使用,是一种在移动设备上创建交互式图表和图形的高效方式。Sencha Touch 是一个流行的JavaScript框架,专门用于构建触摸优化的移动Web应用程序,而FusionCharts则是一款强大的...

    sencha-touch-1.0.1a.zip_Sencha Touch _sencha touch api_touch

    Sencha Touch 是一款专为移动设备设计的前端框架,它为开发者提供了构建触控友好的、高性能的Web应用程序的能力。1.0.1a是这个框架的一个早期版本,虽然现在可能已被更新版本所取代,但对于了解其发展历史和技术原理...

    Sencha Touch2 MVC Demo (含源码/数据库)

    Sencha Touch 2 是一个流行的JavaScript框架,专为构建移动Web应用程序而设计。它提供了丰富的UI组件、数据管理和触摸事件处理,使得开发者可以创建与原生应用类似的交互体验。MVC(Model-View-Controller)架构模式...

    sencha touch sdk工具

    Sencha Touch SDK工具是开发移动应用的重要资源,尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得...

    sencha touch动态加载组件

    Sencha Touch是一款强大的移动应用开发框架,主要用于构建高性能的触屏友好型Web应用程序。它提供了丰富的组件库,使得开发者能够创建复杂、互动性极强的移动应用。在处理大型或内容丰富的应用时,动态加载组件成为...

Global site tag (gtag.js) - Google Analytics