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

1. ## [RESOLVED] GDIPLUS: how we draw dots above a line?

how we can draw dots across a line?
see the image: 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?  Reply With Quote

2. ## 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```  Reply With Quote

3. ## Re: GDIPLUS: how we draw dots above a line? Originally Posted by dday9 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?  Reply With Quote

4. ## Re: GDIPLUS: how we draw dots above a line?

To be honest, I'm not sure. Try changing the pen's width.  Reply With Quote

5. ## Re: GDIPLUS: how we draw dots above a line?

the pen's width it's the expessure, i belive.
but i think it's a custom line style  Reply With Quote

6. ## 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```  Reply With Quote

7. ## 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```  Reply With Quote

8. ## Re: GDIPLUS: how we draw dots above a line? Originally Posted by joaquim 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: (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  Reply With Quote

9. ## Re: GDIPLUS: how we draw dots above a line? Originally Posted by boops boops 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: (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  Reply With Quote

10. ## Re: GDIPLUS: how we draw dots above a line? Originally Posted by joaquim 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:
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:
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:   Reply With Quote

11. ## 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?  Reply With Quote

12. ## Re: GDIPLUS: how we draw dots above a line? Originally Posted by joaquim 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  Reply With Quote

13. ## Re: GDIPLUS: how we draw dots above a line?

thank you so much for all  Reply With Quote

14. ## 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?  Reply With Quote

15. ## 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.   Reply With Quote

#### Posting Permissions

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

Featured