c++ - 使用QPainter连接不同粗细的线条形成干净的边框

Question

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

当我画线时，我得到如下线。

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

我做错了什么？如何绘制具有不同边框(粗细)的矩形，边框连接整齐不重叠？提前致谢。

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)

我有点懒得计算所有东西，但如您所见，由于厚度的原因，您的计算是错误的。

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