Drawing rectangle between two points with arbitrary width - qt

Question

I'm trying to draw a line between two (2D) points when the user swipes their finger across a touch screen. To do this, I plan on drawing a rectangle on every touch update between the X and Y of the previous touch update and the X and Y of the latest touch update. This should create a continuous and solid line as the user swipes their finger across the screen. However, I would also like this line to have an arbitrary width. My question is, how should I go about calculating the coordinates I need for each rectangle (x1, y1, x2, y2)?
--
Also: if anyone has any information on how I could then go about applying anti-aliasing to this line it'd be a massive help.

Answer 1

Calculate a vector between start and end points
V.X := Point2.X - Point1.X;
V.Y := Point2.Y - Point1.Y;
Then calculate a perpendicular to it (just swap X and Y coordinates)
P.X := V.Y; //Use separate variable otherwise you overwrite X coordinate here
P.Y := -V.X; //Flip the sign of either the X or Y (edit by adam.wulf)
Normalize that perpendicular
Length = sqrt(P.X * P.X + P.Y * P.Y); //Thats length of perpendicular
N.X = P.X / Length;
N.Y = P.Y / Length; //Now N is normalized perpendicular
Calculate 4 points that form a rectangle by adding normalized perpendicular and multiplying it by half of the desired width
R1.X := Point1.X + N.X * Width / 2;
R1.Y := Point1.Y + N.Y * Width / 2;
R2.X := Point1.X - N.X * Width / 2;
R2.Y := Point1.Y - N.Y * Width / 2;
R3.X := Point2.X + N.X * Width / 2;
R3.Y := Point2.Y + N.Y * Width / 2;
R4.X := Point2.X - N.X * Width / 2;
R4.Y := Point2.Y - N.Y * Width / 2;
Draw rectangle using these 4 points.
Here's the picture:
EDIT: To answer the comments: If X and Y are the same then the line is exactly diagonal and perpendicular to a diagonal is a diagonal. Normalization is a method of making a length to equal to 1, so that the width of your line in this example will not depend on perpendiculars length (which is equal to lines length here).

Answer 2

Easy way (I'll call the "width" the thickness of the line):
We need to calculate 2 values, the shift on the x axis and the shift on the y axis for each of the 4 corners. Which is easy enough.
The dimensions of the line are:
width = x2 - x1
height = y2 - y1
Now the x shift (let's call it xS):
xS = (thickness * height / length of line) / 2
yS = (thickness * width / length of line) / 2
To find the length of the line, use Pythagoras's theorem:
length = square_root(width * width + height * height)
Now you have the x shift and y shift.
First coordinate is: (x1 - xS, y1 + yS)
Second: (x1 + xS, y1 - yS)
Third: (x2 + xS, y2 - yS)
Fourth: (x2 - xS, y2 + yS)
And there you go! (Those coordinates are drawn counterclockwise, the default for OpenGL)

Answer 3

If I understand you correctly, you have two end points say A(x1,y1) and B(x2,y2) and an arbitrary width for the rectangle say w. I assume the end points will be just at the middle of the rectangle's shorter sides meaning the distance of the final rectangles corner coordinates would be w/2 to A and B.
You can compute the slope of the line by;
s1 = (y2 - y1) / (x2 - x1) // assuming x1 != x2
The slope of the shorter sides is nothing but s2 = -1/s1.
We have slope, we have distance and we have the reference points.
We than can derive two equations for each corner point:
For one corner closer to A
C(x3,y3):
(y3 - y1) / (x3 - x1) = s2 // by slope
(y3 - y1)^2 + (x3 - x1)^2 = (w/2)^2 // by distance
replacing (y3 - y1) by a and (x3 - x1) by b yields
a = b * s2 // slope equation
// replace a by b*s2
b^2 * s2^2 + b^2 = (w/2)^2 // distance equaiton
b^2 = (w/2)^2 / (s2^2+1)
b = sqrt((w/2)^2 / (s2^2+1))
we know w and s2 and hence compute b
If b is known, we can deduce x3
x3 = b + x1
and a, as well
a = b * s2
and so y3
y3 = b*s2 + y1
we have one corner point C(x3,y3).
To compute the other corner point closer to A, say D(x4,y4), the slope equation can be constructed as
(y1 - y4) / (x1 - x4) = s2
and the calculations listed above should be applied.
Other two corners can be calculated with the steps listed here replacing A(x1, y1) with B(x2,y2).