1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default Answered: Pinch Image in Sencha Touch 2.0

    Answered: Pinch Image in Sencha Touch 2.0


    Hi,

    I found the pinch control but how to scale the image on pinch event???

    I am waiting for reply..... thanks in Advance....

  2. So you have the pinch event firing and listened to? I would just scale the image using CSS3

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So you have the pinch event firing and listened to? I would just scale the image using CSS3
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Code:
    Ext.setup({
        onReady: function() {
            var transformDetails = {
                scale: 0,
                angle: 0
            };
    
            var updateTransform = function() {
                component.element.setStyle('-webkit-transform', 'scaleX(' + transformDetails.scale + ') scaleY(' + transformDetails.scale + ') rotate(' + transformDetails.angle + 'deg)');
            };
    
            var component = Ext.Viewport.add({
                html: 'Pinch me',
                centered: true,
                width: 300,
                height: 300,
                style: 'background: red',
                listeners: {
                    pinch: {
                        element: 'element',
                        fn: function(e) {
                            transformDetails.scale = e.scale;
                            updateTransform();
                        }
                    },
                    rotate: {
                        element: 'element',
                        fn: function(e) {
                            transformDetails.angle = e.angle;
                            updateTransform();
                        }
                    }
                }
            });
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #4
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    127
    Answers
    4
    Vote Rating
    4
    demon222 is on a distinguished road

      0  

    Default


    how to use pinch in:

    PHP Code:
    Ext.create('Ext.Img', {
        
    src'path/to/my/image.jpg',
        
    height300,
        
    width400
    }); 
    ?????

  6. #5
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Did you look at the code I posted above? You can just add the listeners into your component, which listen on the 'element', and then call the updateTransform function.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  7. #6
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default


    Not Working....

  8. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default Wow Now this is Working....

    Wow Now this is Working....


    Code:
    Ext.setup({
        onReady: function() {
            Ext.Viewport.add({
                layout: 'fit',
                items: [
                    {
                        docked: 'top',
                        xtype: 'toolbar',
                        title: 'Ext.event.Event example!'
                    },
                    {
                        id: 'logger',
                        html: '<img src="imageScroller/beautiful-scenery24.jpg" />!'
                    }
                ]
            });
    
    
            Ext.Viewport.element.on({
                pinch: function(e , node, options, eOpts) {
                    var transformDetails = {
                        scale: 2,
                        angle: 0
                    };
                    var ScaleCmp =  Ext.getCmp('logger');
                    ScaleCmp.element.setStyle('-webkit-transform', 'scaleX(' + transformDetails.scale + ') scaleY(' + transformDetails.scale + ') rotate(' + transformDetails.angle + 'deg)');
                }
            });
    
    
        }
    });

    See this its working wow , but I want to image back to its original size by pinch again.....
    How to do this?

  9. #8
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default


    I need Smoothness in scale too.... Could anyone please post css3 for smooth scaling pleaseeeeee

  10. #9
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default


    Cool Everything is working properly

    Thanks mitchellsimoens n rdougan

  11. #10
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    127
    Answers
    4
    Vote Rating
    4
    demon222 is on a distinguished road

      0  

    Default


    Jak zrobić skalowanie dla obrazów które są generowane dynamicznie w panelach?? Help, please example....

    R.

    PHP Code:
    Ext.define('SI.view.Printscreens', {
        
    extend:'Ext.Container',
        
    generatePanel:function(pagestypegenid) {
            var 
    me thissizexpanelsx = [], ci 1;
            if (
    Ext.os.deviceType != 'Phone') {
                
    sizex 'size/1240/';
            } else {
                
    sizex '';
            } 
            for(
    ci=1;ci<=pages;ci++) {
                
    panelsx.push({
                    
    sipage:ci,
                    
    siid:id,
                    
    scrollable:'vertical',
                    
    cls:'cardpscr',
                    
    layout'hbox',
                    
    listeners:{
                        
    painted:function() {
                            if(
    this.getHtml() === null) {
                                
    this.setMasked({
                                    
    xtype:'loadmask',
                                    
    message:langX.xLoading
                                
    });
                                
    Ext.Ajax.request({
                                    
    url:'/route.php?params='+typegen+'/id/'+this.config.siid+'/type/preview/'+sizex+'page/'+this.config.sipage,
                                    
    actionMethods:'POST',
                                    
    scope:this,
                                    
    params:{
                                        
    img:'true'
                                    
    },
                                    
    success:function(ro) {
                                        
    this.setItems(Ext.create('Ext.Img', {
                                            
    mode:'img'
                                            
    width'100%'
                                            
    src:r.responseText,
                                            
    listeners: {
                                                
    pinch: {
                                                    
    element:'element',
                                                    
    fn: function(e) {
                                                         
    //????????????????????????????????????????????
                                                    
    }
                                                }
                                            }
                                        }));
                                        
    this.unmask();    
                                    }, 
                                    
    failure:function(r,o) {
                                        
    this.unmask();
                                    }
                                });
                            }   
                        }
                    }                
                });
            } 
            return 
    panelsx;
        }  
    });