Send comments on this topic. | Back to Introduction - All Topics | Help Version 15.12.21
Drawing Simple Lines and Shapes
Take the following steps to start a project and to add some code that draws lines and shapes on an image:
  1. Start Visual Studio .NET.
  2. Choose File->New->Project… from the menu.
  3. In the New Project dialog box, choose either "Visual C# Projects" or "Visual Basic Projects" in the Projects Type List, and choose "Windows Application " in the Templates List.
  4. Type the project name as "Drawing Simple Lines and Shapes" in the Project Name field, and then choose OK. If desired, type a new location for your project or select a directory using the Browse button, and then choose OK
  5. In the "Solution Explorer" window, right-click on the "References" folder, and select "Add Reference…" from the context menu. In the "Add Reference" dialog box, select the ".NET" tab and browse to Leadtools For .NET "\LEAD Technologies\LEADTOOLS 15\Bin\DotNet\Win32 " folder and select the following DLLs:
    • Leadtools.dll
    • Leadtools.Codecs.dll
    • Leadtools.WinForms.dll
    Click the Select button and then press the OK button to add the above DLLs to the application.
  6. Make sure Form1 is in design view. Go to the toolbox (View->Toolbox) and Drag and drop an instance of RasterImageViewer to the form. If you do not have RasterImageViewer in your toolbox, select Tools->Add Remove Toolbox Items from the menu. Click Browse and then select Leadtools.WinForms.DLL from "C:\Program Files\LEAD Technologies\LEADTOOLS 15\Bin\DotNet\Win32" and then click Open and then click OK.
  7. Change the following properties:
    PropertyValue
    DockFill
  8. Switch to Form1 code view (right-click Form1 in the solution explorer then select View Code ) and add the following lines at the beginning of the file:

    [Visual Basic]

    
    Imports System.Drawing.Drawing2D
    Imports Leadtools
    Imports Leadtools.Codecs
    Imports Leadtools.WinForms
    

    [C#]

    
    using System.Drawing.Drawing2D;
    using Leadtools;
    using Leadtools.Codecs;
    using Leadtools.WinForms;
    

  9. Add an event handler to the Form1 Load event and add the following code:

    [Visual Basic]

    
    ' what shape we are drawing
    Private Enum ShapeType
       Line
       Rectangle
       Ellipse
    End Enum
    
    ' shape we are currently drawing
    Private shape As ShapeType
    
    ' start and end point for the line
    Private startCoords As Point
    Private endCoords As Point
    
    ' coordinate for the rectangle and the ellipse
    Private rectangleCoords As Rectangle
    
    ' are we currently drawing or not
    Private drawing As Boolean
    
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
       ' Initialize the private varibles
       shape = ShapeType.Line
       drawing = False
       
       RasterCodecs.Startup()
       ' Load an image into the viewer
       Dim codecs As New RasterCodecs()
       rasterImageViewer1.Image = codecs.Load("C:\Program Files\LEAD Technologies\LEADTOOLS 15\Images\Image1.cmp")
       RasterCodecs.Shutdown()
    End Sub
    

    [C#]

    
    // what shape we are drawing
    private enum ShapeType
    {
       Line,
       Rectangle,
       Ellipse
    }
    
    // shape we are currently drawing
    ShapeType shape;
    
    // start and end point for the line
    private Point startCoords;
    private Point endCoords;
    
    // coordinate for the rectangle and the ellipse
    private Rectangle rectangleCoords;
    
    // are we currently drawing or not
    private bool drawing;
    
    private void Form1_Load(object sender, System.EventArgs e)
    {
       // Initialize the private varibles
       shape = ShapeType.Line;
       drawing = false;
       
       RasterCodecs.Startup();
       // Load an image into the viewer
       RasterCodecs codecs = new RasterCodecs();
       rasterImageViewer1.Image = codecs.Load(@"C:\Program Files\LEAD Technologies\LEADTOOLS 15\Images\Image1.cmp");
       RasterCodecs.Shutdown();
    }
    

  10. Add the following code to the Raster Image Viewer MouseDown event:

    [Visual Basic]

    
    Private Sub RasterImageViewer1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles RasterImageViewer1.MouseDown
       ' check if we are already drawing, if so cancel it
       If (drawing) Then
          ' erase the shape
          DrawShape()
          drawing = False
       
       Else
          ' based on shape, initialize the coordinates
          Select Case (shape)
             Case ShapeType.Line
                ' drawing a line
                startCoords = New Point(e.X, e.Y)
                endCoords = startCoords
                
             Case ShapeType.Rectangle
             Case ShapeType.Ellipse
                ' drawing a rectangle or an ellipse
                rectangleCoords = New Rectangle(e.X, e.Y, 0, 0)
          End Select
          
          ' draw the shape
          drawing = True
          DrawShape()
       End If
    End Sub
    

    [C#]

    
    private void rasterImageViewer1_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e) 
    {
       // check if we are already drawing, if so cancel it
       if(drawing)
       {
          // erase the shape
          DrawShape();
          drawing = false;
       }
       else
       {
          // based on shape, initialize the coordinates
          switch(shape)
          {
             case ShapeType.Line:
                // drawing a line
                startCoords = new Point(e.X, e.Y);
                endCoords = startCoords;
                break;
             
             case ShapeType.Rectangle:
             case ShapeType.Ellipse:
                // drawing a rectangle or an ellipse
                rectangleCoords = new Rectangle(e.X, e.Y, 0, 0);
                break;
          }
          
          // draw the shape
          drawing = true;
          DrawShape();
       }
    }
    

  11. Add the following code to the Raster Image Viewer MouseMove event:

    [Visual Basic]

    
    Private Sub RasterImageViewer1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles RasterImageViewer1.MouseMove
       If (drawing) Then
          ' first, erase the shape
          DrawShape()
          
          ' get new coords for the shape
          Select Case (shape)
             Case ShapeType.Line
                endCoords = New Point(e.X, e.Y)
             
             Case ShapeType.Rectangle, ShapeType.Ellipse
                rectangleCoords = Rectangle.FromLTRB(rectangleCoords.Left, rectangleCoords.Top, e.X, e.Y)
          End Select
          
          ' draw the shape again
          DrawShape()
       End If
    End Sub
    

    [C#]

    
    private void rasterImageViewer1_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e)
    {     
       if(drawing)
       {
          // first, erase the shape
          DrawShape();
          
          // get new coords for the shape
          switch(shape)
          {
             case ShapeType.Line:
                endCoords = new Point(e.X, e.Y);
                break;
             
             case ShapeType.Rectangle:
             case ShapeType.Ellipse:
                rectangleCoords = Rectangle.FromLTRB(rectangleCoords.Left, rectangleCoords.Top, e.X, e.Y);
                break;
          }
    
          // draw the shape again
          DrawShape();
       }
    }
    

  12. Add the following code to the Raster Image Viewer MouseUp event:

    [Visual Basic]

    
    Private Sub RasterImageViewer1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles RasterImageViewer1.MouseUp
       If (drawing) Then
          ' erase the shape
          DrawShape()
          drawing = False
          
          ' draw the shape on the image
          Select Case (shape)
             Case ShapeType.Line
                If (startCoords.X <> endCoords.X OrElse startCoords.Y <> endCoords.Y) Then
                   ' convert the points to image coordinates
                   Dim t As New Transformer(RasterImageViewer1.Transform)
                   startCoords = Point.Round(t.PointToLogical(New PointF(startCoords.X, startCoords.Y)))
                   endCoords = Point.Round(t.PointToLogical(New PointF(endCoords.X, endCoords.Y)))
                   startCoords = RasterImageViewer1.Image.PointToImage(RasterViewPerspective.TopLeft, startCoords)
                   endCoords = RasterImageViewer1.Image.PointToImage(RasterViewPerspective.TopLeft, endCoords)
                   
                   ' create the graphics container for the image and draw the line
                   Dim container As RasterImageGdiPlusGraphicsContainer = RasterImageViewer1.Image.CreateGdiPlusGraphics()
                   Try
                      Dim pen As New Pen(Color.Yellow, 2)
                      Try
                         ' use anti-alias lines
                         container.Graphics.SmoothingMode = SmoothingMode.AntiAlias
                         container.Graphics.DrawLine(pen, startCoords, endCoords)
                         
                         ' draw a rectangle next
                         shape = ShapeType.Rectangle
                      Finally
                         pen.Dispose()
                      End Try
                   Finally
                      container.Dispose()
                   End Try
                   
                   
                   RasterImageViewer1.Invalidate()
                End If
                
                case ShapeType.Rectangle, ShapeType.Ellipse:
                   ' "fix" the rectangle so it does not have a negative width or height
                   rectangleCoords = FixRectangle(rectangleCoords)
                   If (Not rectangleCoords.IsEmpty) Then
                      ' convert the rectangle to image coordinates
                      Dim t As New Transformer(RasterImageViewer1.Transform)
                      rectangleCoords = Rectangle.Round(t.RectangleToLogical(New RectangleF(rectangleCoords.Left, rectangleCoords.Top, rectangleCoords.Width, rectangleCoords.Height)))
                      rectangleCoords = RasterImageViewer1.Image.RectangleToImage(RasterViewPerspective.TopLeft, rectangleCoords)
                      
                      ' create the graphics container for the image and draw the rectangle or ellipse
                      Dim container As RasterImageGdiPlusGraphicsContainer = RasterImageViewer1.Image.CreateGdiPlusGraphics()
                      Try
                         Dim pen As New Pen(Color.Yellow, 2)
                         Try
                            ' use anti-alias lines
                            container.Graphics.SmoothingMode = SmoothingMode.AntiAlias
                            
                            If (shape = ShapeType.Rectangle) Then
                               container.Graphics.DrawRectangle(pen, rectangleCoords)
                               
                               ' draw an ellipse next
                               shape = ShapeType.Ellipse
                            Else
                               container.Graphics.DrawEllipse(pen, rectangleCoords)
                               ' draw a line next
                               shape = ShapeType.Line
                            End If
                         Finally
                            pen.Dispose()
                         End Try
                      Finally
                         container.Dispose()
                      End Try
                         
                      RasterImageViewer1.Invalidate()
                End If
          End Select
       End If
    End Sub
    

    [C#]

    
    private void rasterImageViewer1_MouseUp(object sender, System.Windows.Forms.MouseEventArgs e) 
    {
       if(drawing)
       {
          // erase the shape
          DrawShape();
          drawing = false;
          
          // draw the shape on the image
          switch(shape)
          {
             case ShapeType.Line:
                if(startCoords.X != endCoords.X || startCoords.Y != endCoords.Y)
                {
                   // convert the points to image coordinates
                   Transformer t = new Transformer(rasterImageViewer1.Transform);
                   startCoords = Point.Round(t.PointToLogical(startCoords));
                   endCoords = Point.Round(t.PointToLogical(endCoords));
                   startCoords = rasterImageViewer1.Image.PointToImage(RasterViewPerspective.TopLeft, startCoords);
                   endCoords = rasterImageViewer1.Image.PointToImage(RasterViewPerspective.TopLeft, endCoords);
                   
                   // create the graphics container for the image and draw the line
                   using(RasterImageGdiPlusGraphicsContainer container = rasterImageViewer1.Image.CreateGdiPlusGraphics())
                   {
                      using(Pen pen = new Pen(Color.Yellow, 2))
                      {
                         // use anti-alias lines
                         container.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
                         container.Graphics.DrawLine(pen, startCoords, endCoords);
                         
                         // draw a rectangle next
                         shape = ShapeType.Rectangle;
                      }
                   }
                   
                   rasterImageViewer1.Invalidate();
                }
                break;
             
             case ShapeType.Rectangle:
             case ShapeType.Ellipse:
                // "fix" the rectangle so it does not have a negative width or height
                rectangleCoords = FixRectangle(rectangleCoords);
                if(!rectangleCoords.IsEmpty)
                {
                   // convert the rectangle to image coordinates
                   Transformer t = new Transformer(rasterImageViewer1.Transform);
                   rectangleCoords = Rectangle.Round(t.RectangleToLogical(rectangleCoords));
                   rectangleCoords = rasterImageViewer1.Image.RectangleToImage(RasterViewPerspective.TopLeft, rectangleCoords);
                   
                   // create the graphics container for the image and draw the rectangle or ellipse
                   using(RasterImageGdiPlusGraphicsContainer container = rasterImageViewer1.Image.CreateGdiPlusGraphics())
                   {
                      using(Pen pen = new Pen(Color.Yellow, 2))
                      {
                         // use anti-alias lines
                         container.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
                         
                         if(shape == ShapeType.Rectangle)
                         {
                            container.Graphics.DrawRectangle(pen, rectangleCoords);
                            
                            // draw an ellipse next
                            shape = ShapeType.Ellipse;
                         }
                         else
                         {
                            container.Graphics.DrawEllipse(pen, rectangleCoords);
                            // draw a line next
                            shape = ShapeType.Line;
                         }
                      }
                   }
                   
                   rasterImageViewer1.Invalidate();
                }
                break;
          }
       }
    }
    

  13. Add the following method to Form1 Class:

    [Visual Basic]

    
    Private Sub DrawShape()
       ' draw the shape on screen (reversible)
       Select Case (shape)
          Case ShapeType.Line
             ControlPaint.DrawReversibleLine(RasterImageViewer1.PointToScreen(startCoords), RasterImageViewer1.PointToScreen(endCoords), Color.Transparent)
          
          Case ShapeType.Rectangle, ShapeType.Ellipse
             ' "fix" the rectangle so it does not have a negative width or height
             Dim rc As Rectangle = FixRectangle(rectangleCoords)
             ControlPaint.DrawReversibleFrame(RasterImageViewer1.RectangleToScreen(rc), Color.Transparent, FrameStyle.Thick)
       End Select
    End Sub
    Shared Function FixRectangle(ByVal rc As Rectangle) As Rectangle
       If (rc.Left > rc.Right OrElse rc.Top > rc.Bottom) Then
          Return Rectangle.FromLTRB( _
             Math.Min(rc.Left, rc.Right), _
             Math.Min(rc.Top, rc.Bottom), _
             Math.Max(rc.Left, rc.Right), _
             Math.Max(rc.Top, rc.Bottom))
       Else
          Return rc
       End If
    End Function
    

    [C#]

    
    private void DrawShape()
    {
       // draw the shape on screen (reversible)
       switch(shape)
       {
          case ShapeType.Line:
             ControlPaint.DrawReversibleLine(rasterImageViewer1.PointToScreen(startCoords), rasterImageViewer1.PointToScreen(endCoords), Color.Transparent);
             break;
             
          case ShapeType.Rectangle:
          case ShapeType.Ellipse:
             // "fix" the rectangle so it does not have a negative width or height
             Rectangle rc = FixRectangle(rectangleCoords);
             ControlPaint.DrawReversibleFrame(rasterImageViewer1.RectangleToScreen(rc), Color.Transparent, FrameStyle.Thick);
             break;
       }
    }
    static Rectangle FixRectangle(Rectangle rc)
    {
       if(rc.Left > rc.Right || rc.Top > rc.Bottom)
          return Rectangle.FromLTRB(
             Math.Min(rc.Left, rc.Right),
             Math.Min(rc.Top, rc.Bottom),
             Math.Max(rc.Left, rc.Right),
             Math.Max(rc.Top, rc.Bottom));
       else
          return rc;
    }
    

  14. If you create a C# project you need to do the following:
    1. Select the form1.
    2. Click "Shift + F7", Or right-click and select "View Designer", Or click in the "View Designer" button in the top of the solution explorer window.
    3. Click in the "rasterImageViewer1" from the form.
    4. In the properties window click on the "Events" button.
    5. Click on the "Categorized" button to sort the events by category.
    6. Goto the mouse category. • Select the "rasterImageViewer1_MouseDown" to the "MouseDown" event.
    7. Select the "rasterImageViewer1_MouseMove" to the "MouseMove" event.
    8. Select the "rasterImageViewer1_MouseUp" to the "MouseUp" event.
  15. Build, and Run the program to test it.