Picturebox with Dartsboardimage - after clicked on, know what value?

Hi,

Assume i have a form with a picturebox on it,
the image in the picturebox is a dartboard. (Darts as in England --> image of dartboard here: http://www.amisane.org/images/dartboard2.jpg

What i would like to accomplish: if the user clicks somewhere on the image i want to know where on the board the user clicked so i can allow points.

I know how to make polygons on the picturebox, so i thought i could use that.
First of all, there are alot (very very alot lol) polygons to be created,
and second, how do i know on what polygon the user clicked... (can a polygon be named? or would i just use the X,Y coordinates to find out in what polygon the user clicked? --> seems that would slow down the code very much)

I don't know if i'm following the correct way to do this, let alone i would be aware of another solution...

Btw, if this can be done in VB6, that would also be good.
.Net would be really great!

cheers
Ricky
LVL 12
PaurthsAsked:
Who is Participating?
 
Mike TomlinsonConnect With a Mentor Middle School Assistant TeacherCommented:
If you want to define the darboard as multiple polygons then here is an approach that may work for you:

Imports System.Drawing.Drawing2D
Public Class Form1

    Private polygons As New ArrayList
    Private polygonNames As New Hashtable
    Private lastPolygon As GraphicsPath = Nothing

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim gp As New GraphicsPath


        Dim p(7) As System.Drawing.Point
        p(0).X = 365
        p(0).Y = 195
        p(1).X = 365
        p(1).Y = 195
        p(2).X = 393
        p(2).Y = 194
        p(3).X = 419
        p(3).Y = 195
        p(4).X = 416
        p(4).Y = 208
        p(5).X = 394
        p(5).Y = 207
        p(6).X = 368
        p(6).Y = 207
        p(7).X = 365
        p(7).Y = 195
        gp = New GraphicsPath
        gp.AddPolygon(p)
        polygons.Add(gp)
        polygonNames.Add(gp, "Triple 20 Area")

        ' create more polygons just like above...
        ' ...and add them to "polygons" and "polygonNames"
    End Sub

    Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
        Dim curPolygon As GraphicsPath = Nothing
        For Each polygon As GraphicsPath In polygons
            If polygon.IsVisible(e.X, e.Y) Then
                curPolygon = polygon
                Exit For
            End If
        Next
        If Not (curPolygon Is Nothing) Then
            If Not (lastpolygon Is curPolygon) Then
                lastPolygon = curPolygon
                PictureBox1.Refresh()
                Label1.Text = polygonNames.Item(curPolygon)
            End If
        ElseIf Not (lastPolygon Is Nothing) Then
            lastPolygon = Nothing
            Label1.Text = ""
            PictureBox1.Refresh()
        End If
    End Sub

    Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        If Not (lastPolygon Is Nothing) Then
            Dim pen1 As New System.Drawing.Pen(Color.Blue, 3)
            e.Graphics.DrawPath(pen1, lastPolygon)
            pen1.Dispose()
        End If
    End Sub

    Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
        Dim curPolygon As GraphicsPath = Nothing
        For Each polygon As GraphicsPath In polygons
            If polygon.IsVisible(e.X, e.Y) Then
                curPolygon = polygon
                Exit For
            End If
        Next
        If Not (curPolygon Is Nothing) Then
            MessageBox.Show(polygonNames.Item(curPolygon))
        End If
    End Sub

End Class
0
 
craskinCommented:
You could do something like this:

Private Sub Form1_MouseDown(ByVal sender As Object, ByVal e _
     As
System.Windows.Forms.MouseEventArgs) Handles _
    MyBase.MouseDown
    ' Clear previous results.
    Dim gr As Graphics = Me.CreateGraphics()
    DrawGraph(gr)

    ' Convert the X coordinate into world coordinates.
    Dim m As Matrix = gr.Transform()
    m.Invert()
    Dim pts() As PointF = {New PointF(e.X, e.Y)}
    m.TransformPoints(pts)
    Dim x0 As Single = pts(0).X
    Dim y0 As Single = pts(0).Y

'do something with X,Y
   
End Sub
0
 
craskinCommented:
sorry, ignore the CreateGraphics part.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
PaurthsAuthor Commented:
Hi craskin,
thank you for your very fast response!

It errors out, saying "type matrix is not defined"...
(i am kinda new to .Net lol)

G's
Ricky
0
 
craskinCommented:
you need to import the 2ddrawing library

Imports System.Drawing2D
0
 
PaurthsAuthor Commented:
Hi, you wrote to ignore the  CreateGraphics part, but then gr is not declared...
0
 
Mike TomlinsonMiddle School Assistant TeacherCommented:
Use Polar coordinates.  Then you can "define" the areas of the board as regions between a start and stop angle and a start and stop distance from the center of the dartboard:
http://en.wikipedia.org/wiki/Polar_coordinates
0
 
PaurthsAuthor Commented:
Hi Idle_mind,

looks very interesting,
but i don't have a clue on how to start coding that...
Do you have an example?


About polygons
Can polygons be given a name when created?

'This example draws a polygon in the Triple 20 area

Private Sub cmdDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmdDraw.Click
        Dim g As System.Drawing.Graphics
        Dim pen1 As New System.Drawing.Pen(Color.Blue, 3)
        Dim p(7) As System.Drawing.Point

        p(0).X = 365
        p(0).Y = 195
        'Draw again, or there will be a line from the left upper corner of the picturebox to the polygon
        p(1).X = 365
        p(1).Y = 195
        p(2).X = 393
        p(2).Y = 194
        p(3).X = 419
        p(3).Y = 195
        p(4).X = 416
        p(4).Y = 208
        p(5).X = 394
        p(5).Y = 207
        p(6).X = 368
        p(6).Y = 207
        'Do the first point again, to close the polygon
        p(7).X = 365
        p(7).Y = 195

        g = PictureBox1.CreateGraphics
        g.DrawPolygon(pen1, p)

    End Sub


Is there anyway to know if the user clicked the polygon?

I was thinking in the lines of like a clickable map in HTML.
The part the mouse hovers over "lights up", like a link. When clicked the link would "send" a value to a subroutine or something..... ???

cheers
Ricky
0
 
PaurthsAuthor Commented:
Come to think,
i can create a HTML-page, with the image on it,
create all the area shapes (all the polygons) and put links to it

The question is then, how do i put this page into a .net form?
And, if that can be done, how do i get the link-value into my .net form (code) after i click a polygon in the image in the html-page (which should be inside my form)?

Anyone?

cheers
Ricky
0
 
PaurthsAuthor Commented:
Idle_mind,

you are the hero of the day!!!!

WOW!!!
Really very impressive!!!

Thanks a million!!!

Cheers
Ricky
0
 
Mike TomlinsonMiddle School Assistant TeacherCommented:
"Btw, if this can be done in VB6, that would also be good.
.Net would be really great!"

This can also be done in VB6 but you would have to use lower level GDI APIs to create the polygons, do the "hit testing", and paint them into your PictureBox.

If you have VB.Net 2005 then you can use the Generic List instead of an ArrayList.

If you want to really go with the concept then write a custom class to encapsulate the GraphicsPath.  Then you can store a name AND a value for each path.  This will make the code cleaner since you wouldn't seperate structures to hold the paths, names and values...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.