Pinch Image in Sencha Touch 2.0

[hotdp]

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();
                    }
                }
            }
        });
    }
});

@rdougan nice example! I got it to work with a image but I am having problems with combining it with scroll. I believe its something many could use so hope you will help.

I have a image, I can pinch zoom. If I zoom I should be able to scroll to see other parts of the image (the image will be bigger then the screen). Do you have a good solution?

[mrsunshine]

i start working on a solution where i change the size of the img tag in a scrollable container which works well for me.

http://www.sencha.com/forum/showthre...rollable-Image

Maybe ist possible to improve it by changing the scroller position as well.