Zooming Out and Zooming In (JavaScript)

Take the following steps to add code that can reduce or enlarge the displayed size of the image. This demonstrates the scaling properties that are normally used for zooming in and zooming out. It emphasizes the relationship of the displayed rectangle to the LEAD Raster View control:

1.

Start with the project that you created in Loading and Displaying an Image.

2.

Add the following code between the <FORM> </FORM> tags to create two buttons: "btnZoomIn" and "btnZoomOut":

<INPUT TYPE="button" NAME="btnZoomIn" VALUE="Zoom In" LANGUAGE="JavaScript"
   OnClick="ZoomIn()">
         
<INPUT TYPE="button" NAME="btnZoomOut" VALUE="Zoom Out" LANGUAGE="JavaScript"
   OnClick="ZoomOut()">

3.

Add the following functions between the <SCRIPT> </SCRIPT> tags for the btnZoomIn and btnZoomOut buttons respectively:

function ZoomIn()
{
   var PAINTSIZEMODE_ZOOM = 4; 

   LEADRasterView1.AutoSetRects = true; 
   LEADRasterView1.PaintSizeMode = PAINTSIZEMODE_ZOOM; 
   LEADRasterView1.PaintZoomFactor = LEADRasterView1.PaintZoomFactor + 10; 
   LEADRasterView1.ForceRepaint ();
}

function ZoomOut()
{
   var PAINTSIZEMODE_ZOOM = 4; 

   LEADRasterView1.AutoSetRects = true; 
   LEADRasterView1.PaintSizeMode = PAINTSIZEMODE_ZOOM; 
   if (LEADRasterView1.PaintZoomFactor > 10) 
   {
      LEADRasterView1.PaintZoomFactor = LEADRasterView1.PaintZoomFactor - 10; 
   }
   LEADRasterView1.ForceRepaint ();
}

4.

Run the page to test it.