How to highlight the marked grooves of the clock photo, where the mouse flash is located

Question

hi

I am creating a class to select time from hour and minute by mouse click . I need this method to select the hour and minute.

Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Windows.Forms
Public Class MenuTimeSelector
 Dim listPoint As New List(Of Point)
    Dim CurrentPoint As New Point
    Public Menu As New ToolStripDropDown 'Last ContextMenuStrip
    Dim WithEvents pnl As New Panel With {.BackgroundImage = My.Resources.TimeSelector, .BackgroundImageLayout = ImageLayout.Center}
    Public Sub New()
        '  Menu.Size = New System.Drawing.Size(100, 100)
        pnl.Margin = New Padding(0)
        Dim tlHost As New ToolStripControlHost(pnl) With {.AutoSize = False}
        Menu.DropShadowEnabled = False
        Menu.Padding = New Padding(0)
        ' Menu.AutoSize = False
        Menu.Items.Add(tlHost)
    End Sub
    Dim pen As New Pen(Color.Black)
    Private Sub pnl_MouseMove(sender As Object, e As MouseEventArgs) Handles pnl.MouseMove
             Dim points = New Point(11) {}
        Dim centerX = pnl.BackgroundImage.Width / 2
        Dim centerY = pnl.BackgroundImage.Height / 2
        Dim radius = 39
        For i = 0 To 11
            Dim angle_deg As Double = 30 + i * 30 '
            Dim angle_rad = Math.PI / 180 * angle_deg
            Dim x As Integer = centerX + radius * Math.Cos(angle_rad)
            Dim y As Integer = centerY + radius * Math.Sin(angle_rad)
            points(i) = New Point(x, y)
        Next
        Dim p As New Pen(Color.Green, 2)
        Dim g As Graphics = pnl.CreateGraphics()
        g.Clear(pnl.BackColor)
        g.DrawImage(pnl.BackgroundImage, New PointF(0, 0))
        ' g.DrawLine(pen, CSng(pnl.BackgroundImage.Width / 2), CSng(pnl.BackgroundImage.Height / 2), e.X, e.Y)
        Dim center As New Point(pnl.BackgroundImage.Width / 2, pnl.BackgroundImage.Height / 2)
        Dim angle As Double = Math.Atan2(e.Y - center.Y, e.X - center.X) * 180 / Math.PI
        While angle < 0
            angle += 360
        End While
        Dim OffsetH As Integer = 11
        Dim MouseOnTime As Integer = angle / 30
        MouseOnTime = (MouseOnTime + OffsetH) Mod 12
        'Need Paint by conditions MouseOnTime is 0 to 12
        For a = 0 To points.Length - 1
            'g.DrawString(a, New Font("tohoma", 10), Brushes.Blue, points(a))
            If a = MouseOnTime Then
                CurrentPoint = points(a)
                Dim grooveBounds As New Rectangle(points(a).X - 9, points(a).Y - 9, 18, 18)
                g.DrawEllipse(p, grooveBounds)
            End If
        Next
        Using pen1 As New Pen(Color.Lime, 3)
            For Each poi In listPoint
                g.DrawLine(pen1, center, poi)
            Next
        End Using
        '   g.DrawPolygon(p, points)
    End Sub
  Private Sub pnl_MouseClick(sender As Object, e As MouseEventArgs) Handles pnl.MouseClick
        listPoint.Add(CurrentPoint)
     End Sub
End Class

Answer 1

Hi @Mansour_Dalir ,

You can calculate the points for each hour groove using trigonometric functions, then calculate the angle of the mouse pointer relative to the center of the clock. Check which groove the mouse is currently over and highlights it by drawing a thicker, green line. Other grooves are drawn with a default, thinner yellow line.

Imports System.Drawing
Imports System.Windows.Forms

Public Class MenuTimeSelector
    Dim listPoint As New List(Of Point)
    Dim CurrentPoint As New Point
    Public Menu As New ContextMenuStrip
    Dim WithEvents pnl As New Panel With {.BackgroundImage = My.Resources.TimeSelector, .BackgroundImageLayout = ImageLayout.Center}
    Dim pen As New Pen(Color.Black)
    Dim centerX As Integer
    Dim centerY As Integer

    Public Sub New()
        pnl.Margin = New Padding(0)
        Dim tlHost As New ToolStripControlHost(pnl) With {.AutoSize = False}
        Menu.ShowImageMargin = False
        Menu.DropShadowEnabled = False
        Menu.ShowCheckMargin = False
        Menu.Padding = New Padding(0)
        Menu.Items.Add(tlHost)

        centerX = pnl.BackgroundImage.Width / 2
        centerY = pnl.BackgroundImage.Height / 2
    End Sub

    Private Sub pnl_MouseMove(sender As Object, e As MouseEventArgs) Handles pnl.MouseMove
        Dim points = New Point(11) {}
        Dim radius = 39

        For i = 0 To 11
            Dim angle_deg As Double = 30 + i * 30
            Dim angle_rad = Math.PI / 180 * angle_deg
            Dim x As Integer = centerX + radius * Math.Cos(angle_rad)
            Dim y As Integer = centerY + radius * Math.Sin(angle_rad)
            points(i) = New Point(x, y)
        Next

        Dim g As Graphics = pnl.CreateGraphics()
        g.Clear(pnl.BackColor)
        g.DrawImage(pnl.BackgroundImage, New PointF(0, 0))

        Dim center As New Point(centerX, centerY)
        Dim angle As Double = Math.Atan2(e.Y - center.Y, e.X - center.X) * 180 / Math.PI
        While angle < 0
            angle += 360
        End While

        Dim OffsetH As Integer = 11
        Dim MouseOnTime As Integer = angle / 30
        MouseOnTime = (MouseOnTime + OffsetH) Mod 12

        For a = 0 To points.Length - 1
            If a = MouseOnTime Then
                CurrentPoint = points(a)
                Dim grooveBounds As New Rectangle(points(a).X - 9, points(a).Y - 9, 18, 18)
                g.DrawEllipse(New Pen(Color.Green, 2), grooveBounds)
                g.DrawLine(New Pen(Color.Green, 2), center, points(a)) ' Highlight the groove
            Else
                g.DrawLine(New Pen(Color.Yellow, 1), center, points(a)) ' Default groove color
            End If
        Next

        Using pen1 As New Pen(Color.Lime, 3)
            For Each poi In listPoint
                g.DrawLine(pen1, center, poi)
            Next
        End Using
    End Sub

    Private Sub pnl_MouseClick(sender As Object, e As MouseEventArgs) Handles pnl.MouseClick
        listPoint.Add(CurrentPoint)
    End Sub
End Class

Best Regards.

Jiachen Li

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

To highlight the marked grooves of the clock photo where the mouse cursor is located, you need to detect the mouse position and check if it is within one of the grooves. When the mouse is within a groove, you can draw a highlight over it.

I think this will work

Imports System.Drawing

Imports System.Windows.Forms

Imports System.Drawing.Drawing2D

Public Class MenuTimeSelector

    Public Menu As New ContextMenuStrip

    Dim WithEvents pnl As New Panel With {.BackgroundImage = My.Resources.TimeSelector, .BackgroundImageLayout = ImageLayout.Center}

    Public Sub New()

        pnl.Margin = New Padding(0)

        Dim tlHost As New ToolStripControlHost(pnl) With {.AutoSize = False}

        Menu.ShowImageMargin = False

        Menu.DropShadowEnabled = False

        Menu.ShowCheckMargin = False

        Menu.Padding = New Padding(0)

        Menu.Items.Add(tlHost)

    End Sub

    Dim pen As New Pen(Color.Black)

    Dim highlightPen As New Pen(Color.Red, 3)

    Dim grooves() As Point

    Private Sub pnl_MouseMove(sender As Object, e As MouseEventArgs) Handles pnl.MouseMove

        If grooves Is Nothing Then InitializeGrooves()

        Dim g As Graphics = pnl.CreateGraphics()

        g.Clear(pnl.BackColor)

        g.DrawImage(pnl.BackgroundImage, New PointF(0, 0))

        ' Draw the highlight if the mouse is over a groove

        For Each groove As Point In grooves

            Dim grooveBounds As New Rectangle(groove.X - 10, groove.Y - 10, 20, 20)

            If grooveBounds.Contains(e.Location) Then

                g.DrawEllipse(highlightPen, grooveBounds)

            End If

        Next

        g.Dispose()

    End Sub

    Private Sub InitializeGrooves()

        Dim centerX = pnl.Width / 2

        Dim centerY = pnl.Height / 2

        Dim radius = 100

        grooves = New Point(11) {}

        

        For i = 0 To 11

            Dim angle_deg As Double = 15 + i * 30

            Dim angle_rad = Math.PI / 180 * angle_deg

            Dim x As Integer = centerX + radius * Math.Cos(angle_rad)

            Dim y As Integer = centerY + radius * Math.Sin(angle_rad)

            grooves(i) = New Point(x, y)

        Next

    End Sub

End Class

Answer 3

To highlight the marked grooves of the clock photo where the mouse cursor is located, you need to detect the mouse position and check if it is within one of the grooves. When the mouse is within a groove, you can draw a highlight over it.

I think this will work

Imports System.Drawing  Imports System.Windows.Forms  Imports System.Drawing.Drawing2D  Public Class MenuTimeSelector      Public Menu As New ContextMenuStrip      Dim WithEvents pnl As New Panel With {.BackgroundImage = My.Resources.TimeSelector, .BackgroundImageLayout = ImageLayout.Center}      Public Sub New()          pnl.Margin = New Padding(0)          Dim tlHost As New ToolStripControlHost(pnl) With {.AutoSize = False}          Menu.ShowImageMargin = False          Menu.DropShadowEnabled = False          Menu.ShowCheckMargin = False          Menu.Padding = New Padding(0)          Menu.Items.Add(tlHost)      End Sub      Dim pen As New Pen(Color.Black)      Dim highlightPen As New Pen(Color.Red, 3)      Dim grooves() As Point      Private Sub pnl_MouseMove(sender As Object, e As MouseEventArgs) Handles pnl.MouseMove          If grooves Is Nothing Then InitializeGrooves()          Dim g As Graphics = pnl.CreateGraphics()          g.Clear(pnl.BackColor)          g.DrawImage(pnl.BackgroundImage, New PointF(0, 0))          ' Draw the highlight if the mouse is over a groove          For Each groove As Point In grooves              Dim grooveBounds As New Rectangle(groove.X - 10, groove.Y - 10, 20, 20)              If grooveBounds.Contains(e.Location) Then                  g.DrawEllipse(highlightPen, grooveBounds)              End If          Next          g.Dispose()      End Sub      Private Sub InitializeGrooves()          Dim centerX = pnl.Width / 2          Dim centerY = pnl.Height / 2          Dim radius = 100          grooves = New Point(11) {}                    For i = 0 To 11              Dim angle_deg As Double = 15 + i * 30              Dim angle_rad = Math.PI / 180 * angle_deg              Dim x As Integer = centerX + radius * Math.Cos(angle_rad)              Dim y As Integer = centerY + radius * Math.Sin(angle_rad)              grooves(i) = New Point(x, y)          Next      End Sub  End Class