PDA

View Full Version : [OPEN] Playbook Pinch Bug



hitman01
25 Apr 2011, 5:27 AM
Pinch is detected but scale is not changed.

jay@moduscreate.com
25 Apr 2011, 8:20 AM
What are you trying to scale with pinch?? Can you post a working example?

hitman01
25 Apr 2011, 8:59 AM
I'm trying to use my zoom (pinch) feature that I've got working on ipad/iphone.

The e.scale does not change.

pinch : function(e, t) {

// Update current scale
this.imageScale[t.id].scale = e.scale * this.imageScale[t.id].startScale;

var translateX = 0;

// Scale and position image
var transform = 'translate(' + translateX + 'px) scale3d(' +this.imageScale[t.id].scale+ ', ' +this.imageScale[t.id].scale+ ', ' +this.imageScale[t.
t.style.webkitTransform = transform;

return this.imageScale[t.id].scale;
},

hitman01
28 Apr 2011, 6:24 AM
Any updates on this. Is this confirmed as a bug?

ChrisWTI
19 May 2011, 5:40 AM
This is the same issue we were talking about with the Android OS
http://www.sencha.com/forum/showthread.php?132377-Android-doesn-t-support-javascrip-pinch-events...-or-does-it&p=600448

I have been writing my own pinch javascript to work independent of sench touch, as the sench touch pinch events seem to only work properly in iOS. I am am wondering if the iOS browser have a universal event object that updates as events are generated while the Android and Playbook browsers generate new event objects as events occur. This would explain the behavior I have been seeing with them.

Both the Xoom and Playbook seem to stutter if you try to do too much in a single event. For example, I have been able to get a pinch to zoom behavior working, but if I put in the math required to zoom in and out around where you are pinching, rather than just the center of the image, then the devices can't keep up.

hitman01
19 May 2011, 5:54 AM
I've been seeing the same thing. I was able to implement the pinch on BB Playbook (mygazines.com/demo). But its definitely not as smooth as on iOS.

Here is what I've used:
// Keep track of scale
var distance = this.getDistance(e);
e.scale = (distance/this.startDistance);


getDistance : function(e) {
return Math.sqrt(
Math.pow(Math.abs(e.targetTouches[0].screenX - e.targetTouches[1].screenX), 2) +
Math.pow(Math.abs(e.targetTouches[0].screenY - e.targetTouches[1].screenY), 2)
);

}