none
DrawLine using Mouse in CSharp RRS feed

  • Question

  • Dear All,

    I am looking for the way to solve the issue shown below


    red stars are start and end point but the red connected line are wrong positions.

    The red line must be connected only between red stars and I used

     private void pictureBox_MouseDown(object sender, MouseEventArgs e)
    {
        if (e.Button == System.Windows.Forms.MouseButtons.Left)
        {
             Point P1;
             ArrayList p1List;
             p1.X = e.X;
             p1.Y = e.Y;
             p1List.Add(p1);
             countPoints++;
    
             string marker = "*";
             using (Font markerFont = new Font("Times New Roman", 20))
             {
                  g.DrawString(marker, markerFont, Brushes.Red, e.X, e.Y);
                  pictureBox.Invalidate();
    
             }
        }
    }
    
    private void pictureBox_Paint(object sender, PaintEventArgs e)
    {
       Graphics g = null;
    
       using (g = Graphics.FromImage(Image)) 
       {
           using (var p = new Pen(Color.Red, drawPenSize))
           {
               if (countPoints > 1)
               {
                   g.DrawLine(p, p1List[countPoints - 2], p1List[countPoints - 1]);
                   pictureBox.Invalidate();
                                    g.Dispose();
               }
           }
      }
    }
    

    I hope someone will advice me since the connected points are wrong.

    Thanks and best regards


    KYAW KYAW OO

    • Moved by lucy-liu Friday, February 17, 2012 9:06 AM it is a winform issue (From:Visual Studio Editor)
    Thursday, February 16, 2012 9:17 AM

Answers

  • My psychic debugging sense tells me that the coordinates are not matching your expectations because you are combining text and graphics.

    When you place an asterik at a point (say, at the cursor position), the asterik is not centered at that point. I'm guessing this is what you are expecting. Rather, the coordinates you pass to the DrawString function specify the upper-left corner of the bounding box (which is an imaginary box that encloses the text). So your asterik is being placed to the right and below where you actually want it. (Which I can confirm by looking at your image.)

    Instead of using asteriks for your endpoints, why don't you draw dots instead, using Graphics.FillEllipse? This way you will have pixel-level control over where the dot is shown.

    private void PictureBox_MouseDown(Object sender, MouseEventArgs e)
    {
        ....blah blah....
    
        // Translate dot 3 pixels up and to the left to center it on the mouse position
        g.FillEllipse(Brushes.Red, e.X - 3, e.Y - 3, 6, 6);
    }

    By the way, don't try the above method with text. You can't reliably predict how large the bounding box will be, or exactly where the asterik will be positioned inside. It will change from machine to machine, depending on fonts, DPIs, and other factors. So it will always be off by a few pixels. That is why I recommend using DrawEllipse instead.

    Hope this helps.

    • Proposed as answer by Neddy Ren Monday, February 20, 2012 7:14 AM
    • Marked as answer by Neddy Ren Thursday, February 23, 2012 9:11 AM
    Friday, February 17, 2012 3:46 PM
  • Dear Shawn Ohern,

    I am sorry for late reply coz busy with other things in this app.

    It is work what you said now and thank you for that.

    Best regards

    • Marked as answer by Mr Ko Ko Monday, March 26, 2012 2:44 AM
    Monday, March 26, 2012 2:44 AM

All replies

  • Dear All,

    What I suspect now is the method of DrawString and DrawLine where the location(coordinates) are out of order.

    Now trying to close the case but not manage to find the right one. 

    I hope someone will giude me through for it.

    Best regards



    KYAW KYAW OO

    Friday, February 17, 2012 6:38 AM
  • Hi Mr Ko,
    The Visual Studio Editor forum only discusses questions about editor features in Visual Studio.
    This issue is more related to Winform, I will move it to Windows Forms General forum for a better support.
    Thank you for your understanding!

    Best regards,
    Lucy


    Lucy Liu [MSFT]
    MSDN Community Support | Feedback to us

    Friday, February 17, 2012 9:05 AM
  • Don't draw to an image in a paint event.  Don't invalidate the control in its Paint event.  If you draw in the paint event using the event graphics, is the line correct?
    Friday, February 17, 2012 9:32 AM
  • My psychic debugging sense tells me that the coordinates are not matching your expectations because you are combining text and graphics.

    When you place an asterik at a point (say, at the cursor position), the asterik is not centered at that point. I'm guessing this is what you are expecting. Rather, the coordinates you pass to the DrawString function specify the upper-left corner of the bounding box (which is an imaginary box that encloses the text). So your asterik is being placed to the right and below where you actually want it. (Which I can confirm by looking at your image.)

    Instead of using asteriks for your endpoints, why don't you draw dots instead, using Graphics.FillEllipse? This way you will have pixel-level control over where the dot is shown.

    private void PictureBox_MouseDown(Object sender, MouseEventArgs e)
    {
        ....blah blah....
    
        // Translate dot 3 pixels up and to the left to center it on the mouse position
        g.FillEllipse(Brushes.Red, e.X - 3, e.Y - 3, 6, 6);
    }

    By the way, don't try the above method with text. You can't reliably predict how large the bounding box will be, or exactly where the asterik will be positioned inside. It will change from machine to machine, depending on fonts, DPIs, and other factors. So it will always be off by a few pixels. That is why I recommend using DrawEllipse instead.

    Hope this helps.

    • Proposed as answer by Neddy Ren Monday, February 20, 2012 7:14 AM
    • Marked as answer by Neddy Ren Thursday, February 23, 2012 9:11 AM
    Friday, February 17, 2012 3:46 PM
  • Dear Shawn Ohern,

    I am sorry for late reply coz busy with other things in this app.

    It is work what you said now and thank you for that.

    Best regards

    • Marked as answer by Mr Ko Ko Monday, March 26, 2012 2:44 AM
    Monday, March 26, 2012 2:44 AM