使用 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)

我有点懒得计算一切，但正如您所见，由于厚度，您的计算是错误的。

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