Results 1 to 3 of 3

Thread: imagezoom doubletap problem

  1. #1
    Sencha User sailei1's Avatar
    Join Date
    Jul 2011
    Location
    BeiJing China
    Posts
    43

    Default imagezoom doubletap problem

    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;
    var scale=e.browserEvent.scale||1;
    this.doZoom(scale);


    // var coordinate = e.pageX +','+ e.pageY ;
    //
    // var image=this.element;
    // var h=image.dom;
    // var p= this.findPosition(h);
    // var scale=e.pageX/p[3];
    // var s=h.style;
    // var i= s.background;
    //var zoom=s.zoom;
    // h.style.zoom='1';


    // this.doZoom(scale);




    },
    findPosition:function(oElement ){


    var x2 = 0;
    var y2 = 0;
    var width = oElement.offsetWidth;
    var height = oElement.offsetHeight;
    if( typeof( oElement.offsetParent ) != 'undefined' )
    {
    for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent )
    {
    posX += oElement.offsetLeft;
    posY += oElement.offsetTop;
    }
    x2 = posX + width;
    y2 = posY + height;
    return [ posX, posY ,x2, y2];

    } else{
    x2 = oElement.x + width;
    y2 = oElement.y + height;
    return [ oElement.x, oElement.y, x2, y2];
    }
    }


    });


    css
    .x-zoompanel {
    min-width: 100%;
    min-height: 100%;
    background-repeat:no-repeat;
    background-position:center;
    }

    Why the double e.touches.length == 0?
    Sorry? I am a Chinese my poor English

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    On doubletap it reports 2 touches?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User sailei1's Avatar
    Join Date
    Jul 2011
    Location
    BeiJing China
    Posts
    43

    Default

    How to get the scale in the double-click event

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •