Drawing Simple Lines and Shapes (JavaScript)

1.

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

2.

Add the following code between the <BODY> </BODY> tags to add the Raster 3D DrawEffect object:

<OBJECT ID="RasterFxd" NAME="RasterFxd" 
   CLASSID="CLSID:0014072B-B1BA-11CE-ABC6-F5B2E79D9E3F"
   CODEBASE="path to CAB file/Ltrfd14n.cab">
   <P>This is not supported in the web browser.</P>
</OBJECT><BR>

3.

Add the following code between the <SCRIPT> </SCRIPT> tags:

var DrawObject; 
var StartX; 
var StartY; 
var EndX; 
var EndY; 

4.

Add the following code between the <HEAD> </HEAD> tags to handle the Main Control’s MouseDown event:

<SCRIPT LANGUAGE="JavaScript" FOR="LEADRasterView1" EVENT="MouseDown(Button, Shift , x , y)"> 
<!--
   LEADRasterView1.ScaleMode = 3; 
   RasterFxd.ScaleMode = 3; 
   //Save the starting position. 
   StartX = x; 
   StartY = y; 
   EndX = x; 
   EndY = y; 
   //Cycle through the types of drawing objects. 
   switch(DrawObject) 
   {
   case 0: 
      DrawObject = 1; //Line
      break; 
   case 1: 
      DrawObject = 2; //Rectangle
      break; 
   case 2: 
      DrawObject = 0; //Ellipse
      break; 
   default: 
      DrawObject = 0;   
   }

   RasterFxd.DstLeft = 0; 
   RasterFxd.DstTop = 0; 
   //RasterFxd.DstRight = LEADRasterView1.DstWidth; 
   RasterFxd.DstBottom = LEADRasterView1.DstHeight; 
   RasterFxd.SrcLeft = 0; 
   RasterFxd.SrcTop = 0; 
   RasterFxd.SrcRight = LEADRasterView1.Raster.BitmapWidth; 
   RasterFxd.SrcBottom = LEADRasterView1.Raster.BitmapHeight; 
   //alert("MouseDown");
//-->
</SCRIPT>

5.

Add the following code between the <HEAD> </HEAD> tags to handle the Main Control’s MouseUp event:

<SCRIPT LANGUAGE="JavaScript" FOR="LEADRasterView1" EVENT="MouseUp(Button, Shift, x, y)"> 
<!--
   //Declare local variables. 
   var DrawX; 
   var DrawY; 
   var NewWidth; 
   var NewHeight; 
   var DRAWPENSTYLE_SOLID; 
   var DRAWMODE_COPY_PEN; 
   var DRAWFILLSTYLE_HORIZONTAL_LINE; 

   DRAWPENSTYLE_SOLID = 0; 
   DRAWMODE_COPY_PEN = 13; 
   DRAWFILLSTYLE_HORIZONTAL_LINE = 2; 
   //Set the drawing style. 
   RasterFxd.DrawPenStyle = DRAWPENSTYLE_SOLID; 
   RasterFxd.DrawPenWidth = 2; 
   RasterFxd.DrawPenColor = 255; //Red
   RasterFxd.DrawMode = DRAWMODE_COPY_PEN; 
   RasterFxd.DrawFillColor = 65280; //Green
   RasterFxd.DrawFillStyle = DRAWFILLSTYLE_HORIZONTAL_LINE; 
   RasterFxd.DrawPersistence = true; //On the bitmap
   //Get the current mouse position
   EndX = x; 
   EndY = y; 
   //Determine the origin of the object. 
   if (EndX > StartX) 
      DrawX = StartX; 
   else
      DrawX = EndX; 
   
   if (EndY > StartY) 
      DrawY = StartY; 
   else
      DrawY = EndY; 

   //Determine the height and width of the object. 
   NewHeight = Math.abs(StartY - EndY); 
   NewWidth = Math.abs(StartX - EndX); 
   //Draw the object
   switch(DrawObject) 
   {
   case 0: //Ellipse
      RasterFxd.DrawEllipse(LEADRasterView1.RasterUnk, 0, DrawX, DrawY, NewWidth, NewHeight);     
      break; 
   case 1: //Line
      RasterFxd.DrawLine(LEADRasterView1.RasterUnk, 0, StartX, StartY, EndX, EndY); 
      break; 
   case 2: //Rectangle
      RasterFxd.DrawRectangle(LEADRasterView1.RasterUnk, 0, DrawX, DrawY, NewWidth, NewHeight); 
      break; 
   }
   LEADRasterView1.ForceRepaint ();
//-->
</SCRIPT>

6.

Run your page to test it.