使用QPainter连接不同厚度的线条以形成干净的边框

Question

我正在尝试绘制一个矩形。矩形的每个边框的颜色，粗细和笔样式必须是可自定义的。例如，我必须能够绘制一个矩形，左边框粗细为5，颜色为红色，右边框厚度为6，颜色为蓝色，依此类推。所以我决定绘制4条不同的线并将它们连接起来形成一个矩形。给定原点，边框粗细和矩形宽度和高度，下面的函数绘制一个具有不同边框的矩形。左右边框必须在顶行空格后开始。 （y = originY + topThickness）并在底部边框之前结束（结束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);
}

当我绘制线条时，我得到如下的线条。

如您所见，线的连接和线的起点和终点不符合预期。例如，左边的线不应重叠在顶行。

我做错了什么？如何绘制具有不同边框（在厚度方面）的矩形，其中边框连接整齐，没有重叠？提前谢谢。

Answer 1

嗯，你的问题是你误解了厚度是如何工作的。我画了一个很好的例子：o

这两条黑线具有相同的宽度但厚度不同。正如您所看到的那样，厚度也会对宽度产生一些影响，这可能是您在计算中省略的内容。

如果我检查你的代码并替换值，并将实际值加上厚度，我有：

//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)

我有点懒于计算所有东西，但正如你所看到的，由于厚度，你的计算是错误的。

因此，您可以根据自己的需要计算正确的宽度/高度，并且知道具有相同宽度（或高度）但不同厚度的两条水平（或垂直）线具有不同的实际宽度（或高度）。