Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
New Developer
Posts: 100
Registered: ‎10-31-2010
My Device: Dev Alpha C and PlayBook

Pinch to zoom like Pictures app

Hello,

 

I want to be able to zoom in an image like the in the Pictures app on the PlayBook. I have the following code:

 

Multitouch.inputMode = MultitouchInputMode.GESTURE;

public var area:Sprite;

area.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);

private function onZoom(event:TransformGestureEvent):void
{
        area.scaleX *= event.scaleX;
	area.scaleY *= event.scaleY;
}

 When I use this code pinch to zoom works, but the object stays in the upper left corner. In the Pictures app when you zoom it zooms in on the centerpoint  of your fingers. How can I realize that?


My PlayBook app:
DrawBook
Developer
Posts: 887
Registered: ‎08-31-2009
My Device: 9530, 9630, 9800, 8530, 9900, 9810, 9930, PlayBook, Dev Alpha

Re: Pinch to zoom like Pictures app

The TransformGestureEvent should also give you some cordinates. You will need to use these to off set your Sprite (probably by placing it at a negative x,y location).


Read my thoughts on BlackBerry Development at news.ebscer.com
Contributor
Posts: 34
Registered: ‎03-23-2011
My Device: Blackberry Playbook

Re: Pinch to zoom like Pictures app

I have run into this probelm when dynamically loading content to the stage. This is the way I get around it.

If you a loading an image using URLRequest, Add a contentLoaderInfo to the event listener. When the image has loaded, shift it:

 

event.currentTarget.loader.x -= event.currentTarget.loader.width / 2

event.currentTarget.loader.y -= event.currentTarget.loader.height / 2

 

 

var ldr:Loader = new Loader()

ldr.load(new URLRequest("IMAGE.JPG"));
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,rePos, false, 0, true);
addChild(ldr);

function rePos(event:Event):void
{
   //Shift the loaded image half way left and half way up to make the centre of the image, the new pivot point
   event.currentTarget.loader.x -= event.currentTarget.loader.width / 2;
   event.currentTarget.loader.y -= event.currentTarget.loader.height / 2;
}

 

 

Developer
Posts: 1,004
Registered: ‎12-12-2010
My Device: Z10 (red Limited Edition)

Re: Pinch to zoom like Pictures app

Something else I noticed: is there a reason you scale X and Y independently? I always average them and apply them to both X and Y.

-------------------------------------------
BlackBerry Certified Builder for Native Application Development -- Proud member of the Belgian BlackBerry Developer group
Samples: Park in Ghent
Feeling generous? Nominate me for BB Elite member!
New Developer
Posts: 100
Registered: ‎10-31-2010
My Device: Dev Alpha C and PlayBook

Re: Pinch to zoom like Pictures app


zezke wrote:

Something else I noticed: is there a reason you scale X and Y independently? I always average them and apply them to both X and Y.


What is the benefit from averaging them and applying them to both X and Y? Is it better than the method I'm using?


My PlayBook app:
DrawBook
Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Pinch to zoom like Pictures app

If you want to maintain the same aspect ratio of the original photo, you need to scale both x and y the same amount (in this case the average).
New Developer
Posts: 100
Registered: ‎10-31-2010
My Device: Dev Alpha C and PlayBook

Re: Pinch to zoom like Pictures app

I found the solution:

 

Multitouch.inputMode = MultitouchInputMode.GESTURE;

public var area:Sprite;

area.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);

private function onZoom(event:TransformGestureEvent):void
{
	var transformMatrix:Matrix = area.transform.matrix;
	transformMatrix.tx -= event.localX;
	transformMatrix.ty -= event.localY;
	transformMatrix.scale((event.scaleX + event.scaleY) / 2, (event.scaleX + event.scaleY) / 2);
	transformMatrix.tx += event.localX;
	transformMatrix.ty += event.localY;
	area.transform.matrix = transformMatrix;
}

 


My PlayBook app:
DrawBook
Contributor
Posts: 22
Registered: ‎01-14-2011
My Device: Blackberry Storm

Re: Pinch to zoom like Pictures app

Tjitte, I'm gonna post a new topic soon with some code that I wrote for a pinch zoom draggable image that can be dynamically updated. Stay tuned!

New Developer
Posts: 100
Registered: ‎10-31-2010
My Device: Dev Alpha C and PlayBook

Re: Pinch to zoom like Pictures app

 


vinng86 wrote:

Tjitte, I'm gonna post a new topic soon with some code that I wrote for a pinch zoom draggable image that can be dynamically updated. Stay tuned!


Thank you. I will definitely check that topic out.


My PlayBook app:
DrawBook