# How to draw a line?

#### RandomCoder

##### Well-Known Member
Longtime User
I'm starting to struggle with the Icon Editor application

I've created a 32x32 grid on the Form which is going to be used to create the icon and each section of the grid is 5x5 pixels.

Now I am wanting to create a line tool that will allow the user to select the start and end point then draw a line between.
This was simple enough to implement except that I have a slight problem... I want each section of the grid that the line touches to be filled.

How can I achieve this?
Has anyone any ideas?

This is what I have so far....

B4X:
``````Sub Globals
Dim Type(Name,Colour,Size) Tool
Dim Palette(256)
X1="": Y1="": MouseDown=False
End Sub

Sub Designer_MouseDown (X,Y)
...
Select Tool.Name
Case "Pen"
...
Case "Sucker"
...
Case "Line"
[COLOR="Red"]X1=Int(X/5)*5: Y1=Int(Y/5)*5[/COLOR]
End Select
...
...
End Sub

Sub Designer_MouseUp (X,Y)
If MouseDown=True AND Tool.Name="Line" Then
[COLOR="red"]   X2=Int(X/5)*5: If X2>Designer.Width-10 Then X2=Designer.Width-10
Y2=Int(Y/5)*5: If Y2>165 Then Y2=165
Designer.Line(X1,Y1,X2,Y2,Tool.Colour)[/COLOR]
End If
MouseDown=False
...
End Sub``````

Maybe I am approaching the problem in completely the wrong way, any suggestions would be greatly appreciated.

Thanks,
RandomCoder.

#### LineCutter

##### Active Member
Longtime User
The line you are drawing is going to be 5 pixels wide. You know the difference in X & Y coordinates.
Find the extremes of the cells you are connecting (depends on the orientation of the line, but you only need the "outside" two). Step through in jumps of 1 real pixel & flag/fill the cells you need.

Incidentally, I think you may be in for trouble if you connect a "vertical" line from top to bottom, with a 1 "box" step to one side. Your current strategy will give you a 2 pixel line, top to bottom.
I think you want to join the cell centres, moving from X1,Y1 to X2,Y2 in SQRT([(X2-X1)*(X2-X1)]+[(Y2-Y1)*(Y2-Y1)])/5 real pixel steps (Pythagorus). Flag the cell you are in, using whatever grid record system you have established.
1. Find the centre of the cell containing X1,Y1
2. Find the centre of the cell containing X2,Y2
3. Find X2-X1 & Y2-Y1
4. Calculate the number of steps you need to get from X1,Y1 to X2,Y2 stopping in each cell along the way
5. Iterate though the steps, check the coordinates & flag the cell
6. Act on the cells you've flagged, if you've not done it along the way.

#### RandomCoder

##### Well-Known Member
Longtime User
LineCutter,

Thank you for your response.

I think that I might be tackiling the problem in completely the wrong way.
My App draws the grid on the Forelayer using FLine, as shown in the code below.

B4X:
``````Sub DrawGrid
Designer.ForeLayer=True
Designer.Fline(Designer.Width-170,10,Designer.Width-10,165,cBlack,B)
For Row=0 To 15
Designer.Fline(Designer.Width-170,10+(10*Row),Designer.Width-10,15+(10*Row),cBlack,B)
Next
For Col=0 To 15
Designer.Fline(Designer.Width-165+(10*Col),10,Designer.Width-160+(10*Col),165,cBlack,B)
Next
Designer.Line(Designer.Width-170,10,Designer.Width-10,165,cWhite,BF)
Designer.FLine(10,10,Designer.Width-170,165,cBlack,B)
End Sub``````

I have no recording system that will allow me to 'flag' the parts of the grid a line passes through.
It was my intention to draw the line and then locate each part of the grid that contained the line and fill the entire 5x5 square.
I've managed to draw the line wherever the user wants it but fallen over when it comes to trying to determine which parts to fill.

Do I need to use an array or matrix kind of approach?
How does MS Paint Brush calculate a line, my program will be very simple in that the uses a mousedown event for the start position and the end position will be set by the point that the mouseup event is fired. I'd love to be able to show and update the position of the line as it is being drawn but this is beyond my ability I think.

Is it time to go back to the drawing-board (pardon the pun) and start again :sign0148:

Regards,
RandomCoder