Connecting lines of different thickness to form a clean border using QPainter

Question

I am trying to draw a rectangle. The color,thickness and the pen style for each border of the rectangle must be customizable. For example, I must be able to draw a rectangle with left border thickness say 5 and color being red, and right border thickness = 6 and color being blue and so on. So I decided to draw 4 different lines and connect them to form a rectangle. The below function draws a rectangle with different borders given the origin point, border thicknesses and rectangle width and height. The left and right borders must start after the top line space. (y = originY+topThickness) and end just before bottom border(end Y = orginY+ rectangleHeight -bottomThickness).

void MainWindow::borderTest()
{
QPainter painter(this);
QPen pen;

qint32 topThickness = 6;
qint32 bottomThickness = 7;
qint32 leftThickness = 8;
qint32 rightThickness = 9;

qint32 originX = 15;
qint32 originY = 15;

qint32 rectangleWidth = 300;
qint32 rectangleHeight = 300;


//Top line
pen.setColor("red");
pen.setWidth(topThickness);
painter.setPen(pen);
painter.drawLine(originX,
                 originY+topThickness/2,
                 originX+rectangleWidth,
                 originY+topThickness/2);

//Right line
pen.setWidth(rightThickness);
pen.setColor("blue");
painter.setPen(pen);
painter.drawLine(originX+rectangleWidth,
                 originY+topThickness,
                 originX+rectangleWidth,
                 originY+rectangleHeight-bottomThickness);


//Bottom line
pen.setWidth(bottomThickness);
pen.setColor("green");
painter.setPen(pen);
painter.drawLine(originX+rectangleWidth,
                 originY+rectangleHeight-bottomThickness,
                 originX,
                 originY+rectangleHeight-bottomThickness);

//Left line
pen.setWidth(leftThickness);
pen.setColor("black");
painter.setPen(pen);
painter.drawLine(originX,
                 originY+rectangleHeight-bottomThickness,
                 originX,originY+topThickness);
}

When I draw lines, I am getting lines as below.

As you can see, the joining of lines and starting and ending point of lines are not as expected. For example, the left line should not overlap on the top line.

What am I doing wrong? How to draw rectangles with different borders(in terms of thickness) where borders are connected neatly without overlap? Thanks in advance.

Answer 1

Well, your problem is you missunderstood how the thickness works. I draw you a nice example :o

These two black lines have the same width but a different thickness. As you can see the thicknesses have some effects on width too, and that's probably what you omitted in your computations.

If I check your code and replace values, and put the real values with thicknesses, I have:

//Top line
pen.setColor("red");
pen.setWidth(6);
painter.setPen(pen);
painter.drawLine(15,  // 15-6/2 = 12 (real x starting line)
                 18,  // 18 is the middle of the line, top is at 15, bottom is at 21
                 315, // 315+6/2 = 318 (real x ending line)
                 18);

//Right line
pen.setWidth(9);
pen.setColor("blue");
painter.setPen(pen);
painter.drawLine(315,  // 315+9/2 = 319 or 320 (real x starting line)
                 21,   // 21-9/2 = 16 or 17 (real y starting line)
                 315,  // 
                 308); // 308+9/2 = 312 or 313 (real y ending line)

I'm a bit lazy to compute everything but as you can see, your calculations are wrong because of thicknesses.

So it's up to you to compute right width/height depending on what you want and knowing that two horizontal (or vertical) lines with same widths (or height) but differents thicknesses have not the same real width (or height).