@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:
In the listeners in initImage added:
Code:
pinchstart: { element: 'element',
fn: this.onImagePinchStart
}
Implemented the pinchStart listener (had to account for some quirks on devices):
Code:
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:
Code:
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.