Pinch Zoom Scrollable Image

[bhomass]

I found the culprit.

pinchzoomimage is an Img inside a Container.

when setting width and height of the image, you also end up setting width and height of the container, which for some reason causes the snap back when you try to pan to the bottom.

I added the workaround by defining config parameters imageWidth and imageHeight which are applied to Img only. Now it pans like a charm.

[armode]

There was a great pinch / zoom plugin for ST1 from chris, which worked fine in the end! Central zooming, adjustable scrolling bars, etc.
You can find the code on github:
https://github.com/JarvusInnovations...PinchCarousel/

I tried to port the plugin to ST2, but was not yet successful:
http://www.sencha.com/forum/showthread.php?137632-mostly-working-pinch-zoom-image-carousel-help-perfect-it!&p=749502&viewfull=1#post749502

Maybe this will help to finish the zooming issue...

[armode]

I just want to announce, that I made huge progress in porting the pinch / zoom plugin from chris to ST2.
Maybe someone can help me, with the last small issues...
Have a look at my posting: http://www.sencha.com/forum/showthread.php?137632-mostly-working-pinch-zoom-image-carousel-help-perfect-it!&p=784858&viewfull=1#post784858

[bhomass]

I still have problem with this class.

in general, you may not know the ratio of the image, so a good option is to specify the desired width and let the image size adjust the height by keeping the same ratio. this means when you call this PinchZoomImage class, you don't set the height.

however, if the initial height remains null, then the code breaks when you do zoom/pinch, because you are multiplying null by a fractional number.

any one knows a way to discover the image height after it has been painted?

[bhomass]

I got it.

on load, I picked it up by
var height = e.element.dom.firstChild.height;

[lucas.queiroz]

Hello,
I implemented the example cited in post#1(http://www.sencha.com/forum/showthre...rollable-Image),


but could not perform the pinch with him (he simply does not detect the pinch), only the DoubleTap worked properly. I have


an android GalaxyII 2.3.3, anyone know if you have any restriction to enable the pinch or perhaps something in sencha? I'm


using sencha touch 2.0.1.
note: I did the same tests in IOS simulator with xCode, worked.

[armode]

You can't track pinch gestures on Android 2.x, that's why we added zoom in/out Buttons to the pinch-plugin from Chris.

[in4p]

@mrsunshine

This is a great piece of code and very useful.

I ran into a few usability issues on my implementation:
1) If the user makes the image very small then the pinch to zoom can be difficult (as they have to pinch on the image) -> Easy fix by setting a minimum size
2) The resizing was a little 'wonky'. It always resized from the initial image size. This is odd, for example, once you have zoomed into the image and want to make it smaller, the decrease zoom factor should be applied to the enlarged version of the image, not the original version.

Anyways, to fix the above I added / modified the following, and others might be interested in doing the same.

To the prototype config added:

scaleWidth: 0

In the listeners in initImage added:

pinchstart: {                        element: 'element',
                        fn: this.onImagePinchStart
					}

Implemented the pinchStart listener (had to account for some quirks on devices):

onImagePinchStart: function(e) {		if(this.up('container').getScaleWidth()==0) {
			this.up('container').setScaleWidth(this.getInitialConfig('width'));
		}
		else {
			this.up('container').setScaleWidth(this.element.getWidth());
		}
	},

Modified the resizing method:

onImagePinch: function(e) {        var initialWidth  = this.getInitialConfig('width'),
            initialHeight = this.getInitialConfig('height'),
			imageRatio    = initialWidth / initialHeight,
            container     = this,
            image         = this.element,
		    newWidth, 
    		newHeight,	 
            scroller = this.up('container').getScrollable().getScroller(),
            pos = scroller.getMaxPosition();


		newWidth = this.up('container').getScaleWidth() * e.scale;
    	newHeight = newWidth / imageRatio;	
		
		//Code for Min Size
		if((newWidth < initialWidth) || (newHeight < initialHeight)) {
			newWidth = initialWidth;
			newHeight = initialHeight;
		}


        container.setWidth(newWidth);
        container.setHeight(newHeight);
        image.setWidth(newWidth);
        image.setHeight(newHeight);


        scroller.scrollTo(pos.x/2, pos.y/2);
    },

You'll also note, that I'm doing part of the resizing by using the image ratio (to maintain proportions). The reason for this was that the rounding errors on converting the new sizes to integers had the potential to allow the image to get out of proportions (after multiple resizes).

Anyways, for any of you using @mrsunshine's code, I think the above smooth's the zooming out a bit.

[BoomerBrian]

I am loading my images into a detail card from an html file using an ajax call so they are just plain html <img> tags.

I want to use this plugin but I am struggling trying to figure out how to get the <img> tag to an xtype of 'pinchzoomimage'

Does anyone have any suggestions?

Thanks.
Brian

[in4p]

The following might work for you - in the 'success' return of your AJAX call, parse the img you return (pulling the src property) and then call the pinchzoomimage xtype, passing it the src you retrieved as the config parameter.

Alternatively, you can do roughly the same thing from within the 'pinchzoomimage' class, but you will have to modify some of the code of the class's internal code.

I am loading my images into a detail card from an html file using an ajax call so they are just plain html <img> tags.

I want to use this plugin but I am struggling trying to figure out how to get the <img> tag to an xtype of 'pinchzoomimage'

Does anyone have any suggestions?

Thanks.
Brian