Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How do I draw over an image inside a panel?

Posted on 2009-04-09
11
Medium Priority
?
269 Views
Last Modified: 2013-11-26
I made this application for placing points (x,y) on an image. To make it scrollable, I placed the picturebox inside a panel. Ive tried two different approaches.

Approach 1 is the simplest.
The problem is that after I place an image, when I put a point (or points), when I scroll the image the points disappeare.
How do I keep the points from disapearing? I only want them to disapear when another image is loaded into the picture box.

Approach 2
The problem here is that when I place the points, they shift towards the center.
Why do they points shift and how can I fix this?


'Approach 1 *************************************************************************************************'
Public Class Landmarks
 
    Dim ima, ext As String
    Dim picsize(2) As Integer
    Dim x, y As Integer
    Dim Img As Image
 
    Private Sub PicBox_Click(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PicBox.Click
 
        Dim graph As Graphics = PicBox.CreateGraphics
        Dim coordinate As String
        x = e.X
        y = (-1) * (e.Y) + PicBox.Height - 5
        coordinate = CStr(x) & " " & CStr(y)
        ListBox1.Items.Add(coordinate) 'adds x to listbox 1'
        graph.FillEllipse(Brushes.Blue, e.X - 3, e.Y - 3, 5, 5) 'adds a filled circle in the picturebox '
        graph.DrawEllipse(Pens.Blue, e.X - 6, e.Y - 6, 11, 11) 'adds a ring around the filled circle'
 
    End Sub
 
    Private Sub OpenFile_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles OpenFile.Click
        ima = " "
        ext = " "
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            ima = OpenFileDialog1.FileName
            PicBox.Enabled = True
            picsize(0) = Image.FromFile(ima).Height 'Stores the height of the picture'
            picsize(1) = Image.FromFile(ima).Width ' stores the width of the picture'
            PicBox.Height = picsize(0) 'sets the height of the picturebox = height of the picture'
            PicBox.Width = picsize(1) 'sets the width of the picturebox = width of the picture'
            PicBox.Image = Image.FromFile(ima) 'puts the picture into the picturebox'
            Img = Image.FromFile(ima)
 
        Else
            MsgBox("The extension is not supported.")
        End If
    End Sub
 
    Private Sub PicBox_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PicBox.MouseMove
        x = e.X
        y = (-1) * (e.Y) + PicBox.Height - 5
        coor.Text = CStr(x) & " " & CStr(y)
    End Sub
 
    Private Sub PicBox_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PicBox.Click
 
    End Sub
End Class
'****************************************************************************************************************************'
 
 
 
'Approach 2 *********************************************************************************************************'
Public Class Landmarks
 
    Dim ima, ext As String
    Dim picsize(2) As Integer
    Dim x, y As Integer
    Dim Img As Image
 
    Private Sub PicBox_Click(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PicBox.Click
 
        Dim bmp As New System.Drawing.Bitmap(Img)
        Dim graph As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmp)
        Dim coordinate As String
        x = e.X
        y = (-1) * (e.Y) + PicBox.Height - 5
        coordinate = CStr(x) & " " & CStr(y)
        ListBox1.Items.Add(coordinate) 'adds x to listbox 1'
        graph.FillEllipse(Brushes.Blue, e.X - 3, e.Y - 3, 5, 5) 'adds a filled circle in the picturebox '
        graph.DrawEllipse(Pens.Blue, e.X - 6, e.Y - 6, 11, 11) 'adds a ring around the filled circle'
        Img = bmp.Clone
        PicBox.Image = Img
    End Sub
 
    Private Sub OpenFile_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles OpenFile.Click
        ima = " "
        ext = " "
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            ima = OpenFileDialog1.FileName
            PicBox.Enabled = True
            picsize(0) = Image.FromFile(ima).Height 'Stores the height of the picture'
            picsize(1) = Image.FromFile(ima).Width ' stores the width of the picture'
            PicBox.Height = picsize(0) 'sets the height of the picturebox = height of the picture'
            PicBox.Width = picsize(1) 'sets the width of the picturebox = width of the picture'
            PicBox.Image = Image.FromFile(ima) 'puts the picture into the picturebox'
            Img = Image.FromFile(ima)
 
        Else
            MsgBox("The extension is not supported.")
        End If
    End Sub
 
    Private Sub PicBox_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PicBox.MouseMove
        x = e.X
        y = (-1) * (e.Y) + PicBox.Height - 5
        coor.Text = CStr(x) & " " & CStr(y)
    End Sub
 
    Private Sub PicBox_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PicBox.Click
 
    End Sub
End Class
 
'****************************************************************************************************************************************

Open in new window

0
Comment
Question by:iron_guitarist1987
  • 5
  • 4
  • 2
11 Comments
 
LVL 86

Accepted Solution

by:
Mike Tomlinson earned 1400 total points
ID: 24113859
Try this simple project out...
Public Class Form1
 
    Private marks As New List(Of Point)
 
    Private Sub PictureBox1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox1.Click
        marks.Add(PictureBox1.PointToClient(Cursor.Position))
        PictureBox1.Refresh()
    End Sub
 
    Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        For Each pt As Point In marks
            Dim rc As Rectangle = New Rectangle(pt.X, pt.Y, 1, 1)
            rc.Inflate(6, 6)
            e.Graphics.FillEllipse(Brushes.Red, rc)
        Next
    End Sub
 
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        ' clear all the marks
        marks.Clear()
        PictureBox1.Refresh()
    End Sub
 
End Class

Open in new window

0
 

Author Comment

by:iron_guitarist1987
ID: 24116615
Thanks, but the points are still being shifted.
0
 
LVL 86

Expert Comment

by:Mike Tomlinson
ID: 24117279
It's working fine for me.

See the series of images below:
(1) No Marks
(2) I placed Marks on the characters Eyes
(3) I scrolled the Image Down and to the Right.  The Marks are still on their eyes in the proper place.

Marks1.jpg
Marks2.jpg
Marks3.jpg
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 83

Expert Comment

by:CodeCruiser
ID: 24118013
I think another approach would be to add the marks to the image itself instead of the picturebox. So create the graphics for the image like this

Dim graph As Graphics = Graphics.FromImage(PicBox.Image)
0
 

Author Comment

by:iron_guitarist1987
ID: 24118020
Ok, I got to work. Thanks a billion!
0
 

Author Comment

by:iron_guitarist1987
ID: 24118314
Ok, now I need a way to delete just one of them at a time. What I do in my code is, since I store the positions as a string in a listbox, what I do is a clear all of the marks and then I place them one by one using the values in the listbox. My question is: How can I use the instruction:

marks.Add(PictureBox1.PointToClient(Cursor.Position))

but use a string (xvalue yvalue) as an input instead of cursor.position
0
 
LVL 83

Expert Comment

by:CodeCruiser
ID: 24118356
I do not fully understand your question but i think if you maintain a copy of the image then you can always start from scratch again.
0
 
LVL 86

Expert Comment

by:Mike Tomlinson
ID: 24118366
You would need to create a Point() from the String in your ListBox:
        Dim x, y As Integer
        Dim coords As String = "25 50" ' <-- get it from your ListBox somehow
        Dim values() As String = coords.Split(" ")
        If values.Length = 2 AndAlso Integer.TryParse(values(0), x) AndAlso Integer.TryParse(values(1), y) Then
            Dim pt As New Point(x, y)
            marks.Add(pt)
            PictureBox1.Refresh()
        End If

Open in new window

0
 
LVL 86

Expert Comment

by:Mike Tomlinson
ID: 24118451
To your previous comment:

    "Ok, now I need a way to delete just one of them at a time."

See my code here:
http://www.experts-exchange.com/Programming/Languages/Visual_Basic/Q_24144379.html#23651755
0
 

Author Comment

by:iron_guitarist1987
ID: 24118548
Great! thanks a million!
0
 

Author Closing Comment

by:iron_guitarist1987
ID: 31568658
The code works perfectly. Thank you very much!
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
In real business world data are crucial and sometimes data are shared among different information systems. Hence, an agreeable file transfer protocol need to be established.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
Suggested Courses

972 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question