Drawing Simple Lines and Shapes (Visual Basic Script)

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:

Dim DrawObject 
Dim StartX 
Dim StartY 
Dim EndX 
Dim EndY

4.

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

<SCRIPT LANGUAGE="VBScript" 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.
   Select Case DrawObject
      Case 0
         DrawObject = 1 'Line
      Case 1
         DrawObject = 2 'Rectangle
      Case 2
         DrawObject = 0 'Ellipse
      Case Else
         DrawObject = 0
   End Select
   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
//-->
</SCRIPT>

5.

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

 

<SCRIPT LANGUAGE="VBScript" FOR="LEADRasterView1" EVENT="MouseMove(Button, Shift, x, y)"> 
<!--
   'Declare local variables.
   Dim OldEndX
   Dim OldEndY
   Dim OldDrawX
   Dim OldDrawY
   Dim OldWidth
   Dim OldHeight
   Dim DrawX
   Dim DrawY
   Dim NewWidth
   Dim NewHeight
   Dim hDC
   Dim DRAWPENSTYLE_SOLID
   Dim DRAWMODE_INVERT
   Dim DRAWFILLSTYLE_TRANSPARENT

   DRAWPENSTYLE_SOLID = 0
   DRAWMODE_INVERT = 6
   DRAWFILLSTYLE_TRANSPARENT = 1

   If Button = 1 Then
      'Set the drawing styles.
      RasterFxd.DrawPenStyle = DRAWPENSTYLE_SOLID
      RasterFxd.DrawMode = DRAWMODE_INVERT
      RasterFxd.DrawFillStyle = DRAWFILLSTYLE_TRANSPARENT
      RasterFxd.DrawPersistence = False 'On the window, not the bitmap
      'Save the previous ending mouse position.
      OldEndX = EndX
      OldEndY = EndY
      'Get the current mouse position.
      EndX = x
      EndY = y
      'Calculate the origin of the current object.
      If EndX > StartX Then
             DrawX = StartX
      Else
             DrawX = EndX
      End If
      If EndY > StartY Then
             DrawY = StartY
      Else
             DrawY = EndY
      End If
      'Calculate the origin of the previous object.
      If OldEndX > StartX Then
             OldDrawX = StartX
      Else
             OldDrawX = OldEndX
      End If
      If OldEndY > StartY Then
             OldDrawY = StartY
      Else
             OldDrawY = OldEndY
      End If
      'Calculate the height and width of the current object.
      NewHeight = Abs(StartY - EndY)
      NewWidth = Abs(StartX - EndX)
      'Calculate the height and width of the previous object.
      OldHeight = Abs(StartY - OldEndY)
      OldWidth = Abs(StartX - OldEndX)
      'Erase the old object and draw the new one.
      hDC = LEADRasterView1.GetClientDC ()
      Select Case DrawObject
      Case 0 'Ellipse
         RasterFxd.DrawEllipse Nothing, hDC, OldDrawX, OldDrawY, OldWidth, OldHeight
         RasterFxd.DrawEllipse Nothing, hDC, DrawX, DrawY, NewWidth, NewHeight
      Case 1 'Line
         RasterFxd.DrawLine Nothing, hDC, StartX, StartY, OldEndX, OldEndY
         RasterFxd.DrawLine Nothing, hDC, StartX, StartY, EndX, EndY
      Case 2 'Rectangle
         RasterFxd.DrawRectangle Nothing, hDC, OldDrawX, OldDrawY, OldWidth, OldHeight
         RasterFxd.DrawRectangle Nothing, hDC, DrawX, DrawY, NewWidth, NewHeight
      Case Else
      End Select
      LEADRasterView1.ReleaseClientDC
     End If
//-->
</SCRIPT>

6.

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

<SCRIPT LANGUAGE="VBScript" FOR="LEADRasterView1" EVENT="MouseUp(Button, Shift, x, y)"> 
<!--
   'Declare local variables.
   Dim DrawX
   Dim DrawY
   Dim NewWidth
   Dim NewHeight
   Dim DRAWPENSTYLE_SOLID
   Dim DRAWMODE_COPY_PEN
   Dim 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 = RGB(255, 0, 0) 'Red
   RasterFxd.DrawMode = DRAWMODE_COPY_PEN
   RasterFxd.DrawFillColor = RGB(0, 255, 0) '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 Then
      DrawX = StartX
   Else
      DrawX = EndX
   End If
   If EndY > StartY Then
      DrawY = StartY
   Else
      DrawY = EndY
   End If
   'Determine the height and width of the object.
   NewHeight = Abs(StartY - EndY)
   NewWidth = Abs(StartX - EndX)
   'Draw the object
   Select Case DrawObject
   Case 0 'Ellipse
      RasterFxd.DrawEllipse LeadRasterView1.Raster, 0, DrawX, DrawY, NewWidth, NewHeight
   Case 1 'Line
      RasterFxd.DrawLine LeadRasterView1.Raster, 0, StartX, StartY, EndX, EndY
   Case 2 'Rectangle
      RasterFxd.DrawRectangle LeadRasterView1.Raster, 0, DrawX, DrawY, NewWidth, NewHeight
   Case Else
   End Select
   LEADRasterView1.ForceRepaint
//-->
</SCRIPT>

7.

Run your page to test it.