Results 1 to 17 of 17

Thread: [RESOLVED] GDIPLUS: how we draw dots above a line?

  1. #1

    Thread Starter
    PowerPoster joaquim's Avatar
    Join Date
    Apr 2007
    Posts
    3,904

    Resolved [RESOLVED] GDIPLUS: how we draw dots above a line?

    how we can draw dots across a line?
    see the image:
    Name:  pontos nas coordenadas.jpg
Views: 1701
Size:  30.6 KB
    like you see the red dots(are ellipses) aren't above the line, unless i resize the form.
    heres the code:
    Code:
    Private Sub Form1_Load(sender As Object, e As System.EventArgs) Handles Me.Load
            SetStyle(ControlStyles.ResizeRedraw, True)
        End Sub
    
        Private Sub Form1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
            Dim s As Graphics = e.Graphics
            s.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
            s.DrawLine(Pens.Black, New Point(0, 0), New Point(Me.ClientSize.Width, Me.ClientSize.Height))
            s.DrawLine(Pens.Black, New Point(CInt(Me.ClientSize.Width / 2), 0), New Point(CInt(Me.ClientSize.Width / 2), Me.ClientSize.Height))
            s.DrawLine(Pens.Black, New Point(0, CInt(Me.ClientSize.Height / 2)), New Point(Me.ClientSize.Width, CInt(Me.ClientSize.Height / 2)))
            Dim x As Integer = 0
            For y As Integer = 0 To Me.ClientSize.Height Step 10
                'For x As Integer = 0 To Me.ClientSize.Width Step 10
    
                s.FillEllipse(Brushes.Red, New Rectangle(CInt(x - (10 / 2) + 1), CInt(y - (10 / 2) + 1), 9, 9))
                x += 22
                'Next
            Next
        End Sub
    how can i correct the calculation?
    VB6 2D Sprite control

    To live is difficult, but we do it.

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: GDIPLUS: how we draw dots above a line?

    What you can do is, rather than drawing each individual dots, you can draw a dotted line and then draw the straight line on top of it like this:
    Code:
    Using dottedPen As Pen = New Pen(Color.Red) With {.DashStyle = DashStyle.Dot}
        e.Graphics.DrawLine(dottedPen, New Point(0, 0), New Point(Me.ClientSize))
    End Using
    
    Using solidPen As Pen = New Pen(Color.Black)
        e.Graphics.DrawLine(solidPen, New Point(0, 0), New Point(Me.ClientSize))
    End Using
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3

    Thread Starter
    PowerPoster joaquim's Avatar
    Join Date
    Apr 2007
    Posts
    3,904

    Re: GDIPLUS: how we draw dots above a line?

    Quote Originally Posted by dday9 View Post
    What you can do is, rather than drawing each individual dots, you can draw a dotted line and then draw the straight line on top of it like this:
    Code:
    Using dottedPen As Pen = New Pen(Color.Red) With {.DashStyle = DashStyle.Dot}
        e.Graphics.DrawLine(dottedPen, New Point(0, 0), New Point(Me.ClientSize))
    End Using
    
    Using solidPen As Pen = New Pen(Color.Black)
        e.Graphics.DrawLine(solidPen, New Point(0, 0), New Point(Me.ClientSize))
    End Using
    i'm sorry but we can change the distance between that dots?
    VB6 2D Sprite control

    To live is difficult, but we do it.

  4. #4
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: GDIPLUS: how we draw dots above a line?

    To be honest, I'm not sure. Try changing the pen's width.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  5. #5

    Thread Starter
    PowerPoster joaquim's Avatar
    Join Date
    Apr 2007
    Posts
    3,904

    Re: GDIPLUS: how we draw dots above a line?

    the pen's width it's the expessure, i belive.
    i had read something about it, but i'm limited on information and key words for i search on google.
    but i think it's a custom line style
    VB6 2D Sprite control

    To live is difficult, but we do it.

  6. #6
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,582

    Re: GDIPLUS: how we draw dots above a line?

    If you change X to a Single so that you don't incur a summation bias, and compute a value to scale X based on the width to height ratio, your dots should line up on the line.
    Code:
        Private Sub Form1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
            Dim s As Graphics = e.Graphics
            s.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
            s.DrawLine(Pens.Black, New Point(0, 0), New Point(Me.ClientSize.Width, Me.ClientSize.Height))
            s.DrawLine(Pens.Black, New Point(CInt(Me.ClientSize.Width / 2), 0), New Point(CInt(Me.ClientSize.Width / 2), Me.ClientSize.Height))
            s.DrawLine(Pens.Black, New Point(0, CInt(Me.ClientSize.Height / 2)), New Point(Me.ClientSize.Width, CInt(Me.ClientSize.Height / 2)))
            Dim x As Single = 0
            Dim sfx As Single = Me.ClientSize.Width / Me.ClientSize.Height
            For y As Integer = 0 To Me.ClientSize.Height Step 10
                'For x As Integer = 0 To Me.ClientSize.Width Step 10
    
                s.FillEllipse(Brushes.Red, New Rectangle(CInt(x - (10 / 2) + 1), CInt(y - (10 / 2) + 1), 9, 9))
                x += 10 * sfx
                'Next
            Next
        End Sub

  7. #7
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,582

    Re: GDIPLUS: how we draw dots above a line?

    If you want the dots to maintain a constant distance apart, then you'll need to modify the step size of both X and Y to maintain a constant distance movement along the slope. This will involve doing a square root.
    Since we already have a ratio, we can use 1 + the ratio squared and take the square root of that to get a unit distance value to divide by.
    I'm not an expert in the math, and I'm sure I reversed the standard slope ratio (should by y/x, not x/y), but given the ratio we have, the math code could be as follows. Probably someone might be able to simplify it further, or reverse it to follow the standard slope, distance formula.
    Code:
        Private Sub Form1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
            Dim s As Graphics = e.Graphics
            s.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
            s.DrawLine(Pens.Black, New Point(0, 0), New Point(Me.ClientSize.Width, Me.ClientSize.Height))
            s.DrawLine(Pens.Black, New Point(CInt(Me.ClientSize.Width / 2), 0), New Point(CInt(Me.ClientSize.Width / 2), Me.ClientSize.Height))
            s.DrawLine(Pens.Black, New Point(0, CInt(Me.ClientSize.Height / 2)), New Point(Me.ClientSize.Width, CInt(Me.ClientSize.Height / 2)))
            Dim x As Single = 0
            Dim sfx As Single = Me.ClientSize.Width / Me.ClientSize.Height  'get the x,y ratio
            Dim d As Single = Math.Sqrt(1 + sfx * sfx)   'calculate the unit distance value
            Dim dx As Single = (30 * sfx) / d    'calculate the change in X to space dots 30 pixels apart
            Dim dy As Single = 30 / d            'calculate the change in Y to space dots 30 pixels apart
    
            For y As Single = 0 To Me.ClientSize.Height Step dy
    
                s.FillEllipse(Brushes.Red, New Rectangle(CInt(x - (10 / 2) + 1), CInt(y - (10 / 2) + 1), 9, 9))
                x += dx
                'Next
            Next
        End Sub

  8. #8
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

    Re: GDIPLUS: how we draw dots above a line?

    Quote Originally Posted by joaquim View Post
    i'm sorry but we can change the distance between that dots?
    Set the pen's DashPattern property. That's an array of two (Single) values. The first value stands for the length of the dash, and the second value stands for the space between the dashes. Both values indicate multiples of the pen width. So to draw dots, set the dash length to 1.0.

    This alone will result in square dots. For round dots, also set the pen's DashCap property to Round. For example,

    Code:
         e.Graphics.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
          Using pn As New Pen(Brushes.Blue, 5) With {.DashCap = Drawing2D.DashCap.Round, _
                                                       .DashPattern = {1.0F, 2.0F}}
             e.Graphics.DrawEllipse(pn, 50, 50, 120, 88)
          End Using
    This will give you round dots of 5 pixels diameter, with 10 pixels distance between them:

    Name:  Dots.jpg
Views: 1057
Size:  3.7 KB

    (I recommend using high quality smoothing, but it's not compulsory.)

    GDI+ pens are pretty versatile. If you want stars or smileys instead of dots, for example, there are ways to do that. If you need evenly spaced dots along a complex graphics path, I can show you how (in the case of the above ellipse, I cheated by adjusting the size of the ellipse).

    BB

  9. #9

    Thread Starter
    PowerPoster joaquim's Avatar
    Join Date
    Apr 2007
    Posts
    3,904

    Re: GDIPLUS: how we draw dots above a line?

    Quote Originally Posted by boops boops View Post
    Set the pen's DashPattern property. That's an array of two (Single) values. The first value stands for the length of the dash, and the second value stands for the space between the dashes. Both values indicate multiples of the pen width. So to draw dots, set the dash length to 1.0.

    This alone will result in square dots. For round dots, also set the pen's DashCap property to Round. For example,

    Code:
         e.Graphics.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
          Using pn As New Pen(Brushes.Blue, 5) With {.DashCap = Drawing2D.DashCap.Round, _
                                                       .DashPattern = {1.0F, 2.0F}}
             e.Graphics.DrawEllipse(pn, 50, 50, 120, 88)
          End Using
    This will give you round dots of 5 pixels diameter, with 10 pixels distance between them:

    Name:  Dots.jpg
Views: 1057
Size:  3.7 KB

    (I recommend using high quality smoothing, but it's not compulsory.)

    GDI+ pens are pretty versatile. If you want stars or smileys instead of dots, for example, there are ways to do that. If you need evenly spaced dots along a complex graphics path, I can show you how (in the case of the above ellipse, I cheated by adjusting the size of the ellipse).

    BB
    great. maybe you can teach me more about using stars or bitmaps(if a bitmap is possible)?
    thank you so much
    VB6 2D Sprite control

    To live is difficult, but we do it.

  10. #10
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

    Re: GDIPLUS: how we draw dots above a line?

    Quote Originally Posted by joaquim View Post
    great. maybe you can teach me more about using stars or bitmaps(if a bitmap is possible)?
    thank you so much
    The method is basically similar to Passel's code in post #7. For a straight line, you have to calculate where to draw each star (or any other image) and paint it with DrawImage instead of using FillEllipse. (I thought I had another method based on a TextureBrush, but it turns out it doesn't work very well.)

    For anything other than straight lines, the problem is how to get the regularly spaced points. For a geometrical curve (Ellipse, Arc, Bezier or Spline) I can sum up an approach like this:
    1. define a GraphicsPath and add the curve using AddEllipse, AddArc etc. to it.
    2. change the spacing of points along the curve using the GraphicsPath.Flatten method.
    3. use the path's PathPoints array as places to draw the image.

    Here's another approach which works well for a hand-drawn line. You build a list of the points while you draw in the MouseMove event. Below is a code example for drawing on a form (Form1). Set the form's DoubleBuffered property to True in the Designer (or use a PictureBox instead). The code checks if each new point is far enough away from the previous point before adding it to the list.
    Code:
    Public Class Form1
    
       Private starImage As Image = New Bitmap(file path of your image)
       Private stroke As New List(Of Point)
       Private starSize As Integer = 20
       Private starSpacing As Integer = 20
    
       Private Sub Form1_MouseDown(sender As Object, e As MouseEventArgs) Handles Me.MouseDown
          If e.Button = Windows.Forms.MouseButtons.Left Then
             'Start a new stroke:
             stroke = New List(Of Point)({e.Location})
          End If
       End Sub
    
       Private Sub Form1_MouseMove(sender As Object, e As MouseEventArgs) Handles Me.MouseMove
          If e.Button = Windows.Forms.MouseButtons.Left Then
    
             'Check if the distance from the last point is more than the required spacing:
             Dim p As Point = stroke.Last
             Dim distance As Double = Math.Sqrt((e.X - p.X) ^ 2 + (e.Y - p.Y) ^ 2)
             If distance >= starSpacing Then
    
                'Add the new point to the stroke:
                stroke.Add(e.Location)
                Me.Invalidate()
             End If
          End If
       End Sub
    
       Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
          If stroke.Count > 0 Then
             e.Graphics.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic
             'Paint images centred on the stroke points:
             For Each p As PointF In stroke
                e.Graphics.DrawImage(starImage, p.X - 10, p.Y - 10, 20, 20)
             Next
          End If
       End Sub
    I've attached a PNG file with the star in case you need one to try out the code. Here's an example of the result:
    Name:  starline.png
Views: 1118
Size:  12.5 KB
    Attached Images Attached Images  

  11. #11

    Thread Starter
    PowerPoster joaquim's Avatar
    Join Date
    Apr 2007
    Posts
    3,904

    Re: GDIPLUS: how we draw dots above a line?

    thank you so much. for all
    Code:
    pn.DashPattern = {1.0F, 10.0F} 'expessure and distance
    i'm testing the code. the DashPattern accepts an array, in these case it's the border width and distance between the dots. but it can accept more elements\items. can you explain them?
    Last edited by joaquim; Jun 2nd, 2017 at 03:37 PM.
    VB6 2D Sprite control

    To live is difficult, but we do it.

  12. #12
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

    Re: GDIPLUS: how we draw dots above a line?

    Quote Originally Posted by joaquim View Post
    thank you so much. for all
    Code:
    pn.DashPattern = {1.0F, 10.0F} 'expessure and distance
    i'm testing the code. the DashPattern accepts an array, in these case it's the border width and distance between the dots. but it can accept more elements\items. can you explain them?
    You can make more complicated dash-space patterns. Odd-numbered members of the DashPattern array stand for dashes and even numbered members stand for spaces. Suppose you have a pen 5 pixels wide, and you set its DashPattern to {1.0, 3.0, 4.0, 2.0}. You can use the pen to draw a line with:
    1. a 5 pixels wide dot, then
    2. a 15 pixel space, then
    3. a 20 pixel dash, then
    4. a 10 pixel space.
    repeated over and over again.

    I didn't mention it before because I think it's useless (at least to me).

    BB

  13. #13

    Thread Starter
    PowerPoster joaquim's Avatar
    Join Date
    Apr 2007
    Posts
    3,904

    Re: GDIPLUS: how we draw dots above a line?

    thank you so much for all
    VB6 2D Sprite control

    To live is difficult, but we do it.

  14. #14
    Junior Member
    Join Date
    Dec 2019
    Posts
    21

    Re: [RESOLVED] GDIPLUS: how we draw dots above a line?

    Boops,
    would it be possible to add a text, and following the text paths put points on that path? Points where I can define the distance between them?
    And after these points have been added, take the coordinates of these points and create a gcode?

  15. #15
    College Grad!!! Jacob Roman's Avatar
    Join Date
    Aug 2004
    Location
    Miami Beach, FL
    Posts
    5,339

    Re: [RESOLVED] GDIPLUS: how we draw dots above a line?

    Just throwing it out there, but you just bumped a thread that is three years old.

  16. #16
    New Member
    Join Date
    Oct 2012
    Posts
    2

    Re: [RESOLVED] GDIPLUS: how we draw dots above a line?

    great

  17. #17
    New Member
    Join Date
    Oct 2012
    Posts
    2

    Re: GDIPLUS: how we draw dots above a line?

    Quote Originally Posted by joaquim View Post
    great. maybe you can teach me more about using stars or bitmaps(if a bitmap is possible)?
    thank you so much
    great

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width