Zoom In / Zoom Out Canvas

[Stephen O]

Hi I was trying to implement a zoom in/out for the whole canvas which scales all the sprites in it.
I did some implementation and had some partial success as the handles doesnt resize/scale with it (the sprite does).
I was simply binding the scaled x,y,width,height to the shape (sprite).
What the best and correct way of doing it? Can someone pls point me to the right direction?

[Jacob Schatz]

To do this I wrapped the object-handles-canvas in a canvas... I then applied scaleX and scaleY to the mainCanvas itself. I also made a grid as you can see in this example. But that's a different story. 

I also had to redraw every handle each object and compensate for the zoom level. So as I zoomed in  I had to make each handle smaller to make it appear as if it was not changing in size.  

Layout of my object handles canvas

<mx:Canvas width="{mainContainer.width}" height="{mainContainer.height}" id="mainCanvas" clipContent="false" >

<canvas:ObjectHandlesCanvas top="200" left="200" clipContent="false" id="oh" >

<grid:Grid left="0" top="0" id="grid" />

</canvas:ObjectHandlesCanvas>

</mx:Canvas>

In response to the zoom changing: 

private function zoomChanged(e:ZoomChangeEvent):void

{

view.parent.scaleX = propertiesModel.zoomLevel * 0.2;

view.parent.scaleY = propertiesModel.zoomLevel * 0.2;

for(var i:uint = 1; i < view.objectHandles.modelList.length; i++)

{

view.objectHandles.redrawHandle(view.objectHandles.modelList[i]);

}

}

Change your sprite handle to compensate for zoom level. 

public function redraw() : void

{

var zint:int = 0;

if(PropsModel.getInstance() != null)

{

zint = PropsModel.getInstance().zoomLevel - PropsModel.getInstance().defaultZoomLevel;

}

graphics.clear();

if( isOver )

{

graphics.lineStyle(1,0x508df4);

graphics.beginFill(0xc5ffc0 ,1);

}

else

{

graphics.lineStyle(1,0x508df4);

graphics.beginFill(0xFFFFFF,1);

}

graphics.drawRect(-5 - (-zint * 0.25),-5 - (-zint * 0.25),10+ (-zint * 0.6),10+ (-zint * 0.6));

graphics.endFill();

}

--
You received this message because you are subscribed to the Google Groups "Flex ObjectHandles" group.
To post to this group, send email to object...@googlegroups.com.
To unsubscribe from this group, send email to objecthandle...@googlegroups.com.
Visit this group at http://groups.google.com/group/objecthandles?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Patrick]

This should help you: http://www.rockholla.org/technology/2011/01/07/flex-as3-pan-zoom-component

I've used it with objecthandles successfully--built a diagramming tool basically, that is a pan/zoom canvas with moveable/resizeable objects w/in.

[Stephen O]

Thanks for the input Jeff, before I saw this, I was able to fix my prob by 

* adding scaledX, scaledY, scaledWidth and scaledHeight to Shape models (ie. scaledX = x * scaleValue), 

* bind those values to my Shape instead of X,Y,Width and Height. 

* and then I had to override updateHandlePositions() in ObjectHandles to replace the usual attribs with scaledX, scaledY, scaledWidth, 

   scaledHeight to properly set the correct handler positions. 

So I was rescaling the individual Sprites itself and repositioning its corresponding handlers instead of the resizing Canvas container itself.

So far the problem I saw is, it doesnt deal with the decorators. Is resizing the Container a better approach? does it take care of the decorators

problem as well? I'm not building a diagramming app, so I probably wont have more than 10 items on the canvas.

With your solution, I'm assuming that you implemented something that lets the child sprite resize when the container resize? 

Pls bear with me, still trying to familiarize some of the parts of the code. 

[Stephen O]

Patrick,

The widget looks awesome. As I dont see any reference to ObjectHandles in the comment section, How much work does it involve to integrate object-handles with it? Do I have to change anything on OH or I can just plug it in and use the panzoomcontent as the container? I'd be happy with even a pseudocode to illustrate the sample integration :).

[Patrick]

Here's a very basic working example of how you might do it:

http://rockholla.org/wp-content/demos/flex-panzoom-objecthandles/

Hope that helps!

[Stephen O]

excellent! very much appreciated. thanks!