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
Printable View
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 ...Quote:
Originally Posted by Cacofoniks
now how can i centralize the image?
...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...
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?
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?
Quote:
Originally Posted by Cacofoniks
I think the pinch event is only supported on iOS and Android 3+.
pinch works on my Samsung Galaxy Nexus. only problem is pan to the bottom of the image.
Doesn't that phone have Android 4?Quote:
Originally Posted by bhomass
yes, is Android 4.
no one else sees the same problem? why would the image snap back and refuses to reach the bottom?
i implement this class and improve
ItemCarousel.js
PinchCarouselCode: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);
}
}
});
},
});
how to useCode: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);
}
});
i need now centralize the image.. any suggestions?Code:var img = Ext.create('App.ext.carousel.ItemCarousel', {
src:result.Result[i].uri,
id:'image'+i,
});
mySlideShow.add(img);