Pinch Zoom Scrollable Image

[Cacofoniks]

dphunkt, that worked like a charm thank you very so much

Have you tested it in an Android device? The pinch doesn't work in my Desire (Android 2.2), is that how it is supposed to be?

Thanks again!!

Petros

[Perdiga]

dphunkt, that worked like a charm thank you very so much

Have you tested it in an Android device? The pinch doesn't work in my Desire (Android 2.2), is that how it is supposed to be?

Thanks again!!

Petros

i am testing in my galaxy tab and works fine ...

now how can i centralize the image?

[Cacofoniks]

...from what I understand the issue of central image is still to be resolved.

Is there any way that we can embed a standard JS-framework agnostic solution for pinch-zoom in Sencha, like the Zynga Scroller for example?

Thanks...

[bhomass]

Hi, great class.

I have it all working except for image size.

when I use flex:1, the image if hard coded to 0 width and 0 height. I can see the style:"width:0px; height:0px; !important" attribute in the source.

when I use width: 320, height:440
it works but is the wrong format, and when I rotate the phone to a landscape orientation, the width does not adjust.

question: is flex:1 suppose to let the image display at the full size of the screen? why do I get hard coded size of 0,0? when you set a fixed width and height, are you suppose to detect the browser container size first? how do you adjust when the phone rotates?

[bhomass]

I played with various width and height settings. it seems as long as I set the width to be sames as the landscape phone width, it looks decent in either direction. However, there is problem panning to the bottom of the page. Everytime I tried move the page up to see the bottom section, it snaps back by itself. any ideas?

[SButts]

dphunkt, that worked like a charm thank you very so much

Have you tested it in an Android device? The pinch doesn't work in my Desire (Android 2.2), is that how it is supposed to be?

Thanks again!!

Petros

I think the pinch event is only supported on iOS and Android 3+.

[bhomass]

pinch works on my Samsung Galaxy Nexus. only problem is pan to the bottom of the image.

[SButts]

pinch works on my Samsung Galaxy Nexus. only problem is pan to the bottom of the image.

Doesn't that phone have Android 4?

[bhomass]

yes, is Android 4.

no one else sees the same problem? why would the image snap back and refuses to reach the bottom?

[Perdiga]

i implement this class and improve

ItemCarousel.js

Ext.define('App.ext.carousel.ItemCarousel', {
    extend: 'Ext.Container',
    xtype: 'itemcarousel',


    config: {
        src: null,
        id: null,
        initWidth: null,
        initHeight: null,
        layout: 'vbox',
        scrollable: {
            direction: 'both',
            directionLock: false,
            indicators: false,
            momentumEasing: {
                momentum: {
                    acceleration: 60,
                    friction: 0.3
                },
                bounce: {
                    acceleration: 30,
                    springTension: 0.3
                }
            }
        },
        listeners: {
            painted: function () {
                this.load();
            },
            resize:function(){
                console.log(arguments,'resize')
            }
        }


    },
    load: function () {
        this.removeAll();
        this.add({
            xtype: 'image',
            cls: 'carousel-item-img',
            width: this.getInitWidth(),
            height: this.getInitHeight(),
            style: {
                '-webkit-background-size': 'contain',
                '-webkit-backface-visibility': 'hidden',
                '-webkit-perspective': '1000',
                '-webkit-transform': 'translate3d(0, 0, 0)'
            },
            src: this.getSrc(),
            listeners: {
                load: function (img, e, eOpts) {
                    img.setWidth(img.imageObject.naturalWidth);
                    img.setHeight(img.imageObject.naturalHeight);
                }
            }
        });
    },
});

PinchCarousel

Ext.define('App.ext.carousel.PinchCarousel', {
    extend: 'Ext.Carousel',
    xtype: 'slideshow',


    onItemAdd: function (item, index) {
        var scale, perc, size,
            el = item.element;


        el.on({
            doubletap: function (e, node, options, eOpts) {
                size = el.down('.carousel-item-img').getSize();
                newScale = item.parent.itemLength / size.width


                width = size.width * newScale,
                height = Math.round(size.height * newScale),


                console.log(width, height, newScale)


                el.down('.carousel-item-img').setSize(width, height);
            },


            pinchstart: function (e, node, options, eOpts) {
                size = el.down('.carousel-item-img').getSize();
            },
            pinch: function (e, node, options, eOpts) {
                var newScale = e.scale,
                    scroller = item.getScrollable().getScroller(),
                    width = size.width * newScale,
                    height = size.height * newScale,
                    pos = scroller.getMaxPosition();


                if (height > 1920 || width > 1200 || height < 350 || width < 350) return;


                el.down('.carousel-item-img').setSize(width, height);
                //keeps it centered but jumpy
                scroller.scrollTo(pos.x / 2, pos.y / 2);
            },
            pinchend: function () {
                //item.getScrollable().getScroller().refresh();
            },
        });


        this.callParent(arguments);
    },
    onDragStart: function (e) {
        var scroller = this.getActiveItem().getScrollable().getScroller();
        //ensure the image component is scrolled all the way to the edge of its scrollable container
        if (e.targetTouches.length == 1 && (e.deltaX < 0 && scroller.getMaxPosition().x === scroller.position.x) || (e.deltaX > 0 && scroller.position.x == 0)) {
            this.callParent(arguments);
        }
    },
    onDrag: function (e) {
        //console.log(this.getActiveItem().getScrollable().getScroller().position.x);
        if (e.targetTouches.length == 1)
            this.callParent(arguments);
    },
    onDragEnd: function (e) {
        if (e.targetTouches.length < 2)
            this.callParent(arguments);
    }
});

how to use

var img = Ext.create('App.ext.carousel.ItemCarousel', {   
                                src:result.Result[i].uri,
                                id:'image'+i,
                            });
                            mySlideShow.add(img);

i need now centralize the image.. any suggestions?