Sencha Touch 2 imagezoom

/**  
 * @Author sai  
 * 
 */
Ext.define('zoom.view.ZoomPanel', {
    extend: 'Ext.Img',
    xtype : 'zoompanel',
    
    config: {
        baseCls: Ext.baseCSSPrefix + 'zoompanel',

        layout: {
            type: 'fit',
            pack: 'center'
        }
    },
    
    initialize: function() {
        this.touches = 0;
        this.zoom = 100.0;
        this.element.on({
            scope      : this,
            doubletap  : 'onDoubleTap',
            touchstart : 'onTouchStart',
            touchmove  : 'onTouchMove',
            touchend   : 'onTouchEnd'
        });
        this.callParent();
    },

    onTouchStart: function(e) {
        this.touches = e.browserEvent.touches.length;
    },

    onTouchMove: function(e) {
		
        e.preventDefault();
        if(this.touches == 2){
            this.doZoom(e.browserEvent.scale);
        }
    },

    onTouchEnd: function(e) {
		
        if(this.touches == 2){
            this.doZoom(e.browserEvent.scale);
        }
        this.touches = e.browserEvent.touches.length;
    },
    doZoom: function(scale) {
		debugger;
		console.log(scale);
        this.fireEvent('beforeZoom', [this, this.zoom]);
        this.zoom = 100.0 * scale;
        this.element.setStyle('zoom', this.zoom + '%');
        this.fireEvent('zoom', [this, this.zoom]);
    },
    onDoubleTap:function(e){
		debugger;
		console.log('DoubleTap');
        var me=e;
        e.touches.length; //搞不懂了 这里 为什么 是0?
		var scale=e.browserEvent.scale||1;
	    this.doZoom(scale);
	}
  

});

css 
.x-zoompanel {
    min-width: 100%;
    min-height: 100%;
	background-repeat:no-repeat;
	background-position:center;
}
ios 可以使用, android 2.3 测试过 不可以! 

http://www.sencha.com/forum/showthread.php?228398-imagezoom-doubletap-problem

你可能感兴趣的:(Sencha Touch)