Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Zoom In/Zoom out (Read 2715 times)
liza
Full Member
***
Offline


I Love MindFusion!

Posts: 132
Joined: Apr 25th, 2019
Zoom In/Zoom out
May 20th, 2019 at 3:51am
Print Post  
Hi, how can I give zoomin and zoomout functionality in the canvas of the diagram? So that if there are multiple nodes so I can make it expanded by zooming in. Please help into this
  
Back to top
AIM  
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Zoom In/Zoom out
Reply #1 - May 20th, 2019 at 5:32am
Print Post  
Hi,

You can use the Diagram ZoomFactor property on the client-side to incrementally zoom in or out (100 is the default zoom value, less than that will zoom out the diagram, a higher value will zoom in). You can also use the Diagram zoomToFit to fit the document contents in the viewport or zoomToRect to fit the specified document rectangle respectively.

There's also the ZoomControl widget provided in the package. With it you can let your users zoom in and out the view interactively. How to use this control is show in the Controls sample, included the MvcDiagram package.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
liza
Full Member
***
Offline


I Love MindFusion!

Posts: 132
Joined: Apr 25th, 2019
Re: Zoom In/Zoom out
Reply #2 - May 20th, 2019 at 6:35am
Print Post  
Please can you elaborate it more. Not getting how to use it
  
Back to top
AIM  
IP Logged
 
liza
Full Member
***
Offline


I Love MindFusion!

Posts: 132
Joined: Apr 25th, 2019
Re: Zoom In/Zoom out
Reply #3 - May 20th, 2019 at 7:49am
Print Post  
Thanks,
I used  diagram.getNodeEffects().push(new GlassEffect());
var zoomer = MindFusion.Controls.ZoomControl.create($("#zoomer")[0]);
    zoomer.setTarget(diagram);

and I am getting zoomin/zoomout feature.
  
Back to top
AIM  
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Zoom In/Zoom out
Reply #4 - May 20th, 2019 at 8:46am
Print Post  
Hi,

That's how you use the control in the stand-alone javascript version, but for MVC is a bit different. If you want the zoom control values to persist, you need to create it on the server-side. As said above, refer to the Controls sample application provided with the control. It shows how you can add the ZoomControl widget to your page and how to access it both on the server and on the client.

You can also download a the sample application here: https://mindfusion.eu/products/asp.net-mvc/diagramming/samples.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint