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
Tjitte
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
Please use plain text.
Developer
Ebscer
Posts: 865
Registered: ‎08-31-2009
My Device: 9530, 9630, 9800, 8530, 9900, 9810, 9930, PlayBook, Dev Alpha
My Carrier: Verizon

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
Please use plain text.
Contributor
mellisdesigns
Posts: 34
Registered: ‎03-23-2011
My Device: Blackberry Playbook
My Carrier: Not Avaliable

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;
}

 

 

Please use plain text.
Developer
zezke
Posts: 1,004
Registered: ‎12-12-2010
My Device: Z10 (red Limited Edition)
My Carrier: Mobile Vikings

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!
Please use plain text.
New Developer
Tjitte
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
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

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).
Please use plain text.
New Developer
Tjitte
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
Please use plain text.
Contributor
vinng86
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!

Please use plain text.
New Developer
Tjitte
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
Please use plain text.