重绘两边半圆中间矩形的疑问 - QTCN开发网

离线lwei24

骑士

只看楼主倒序阅读楼主发表于: 2022-05-16

如题，在项目开发中，自己想重绘一个两边半圆中间矩形的按钮，具体代码如下：

复制代码

QPainterPath CWidget::makeSemicircleEdgeRectanglePath(QRect rect)
{
int x = rect.x();
int y = rect.y();
int w = rect.width();
int h = rect.height();
int r = h/2;
QPoint leftCenter(x+r,y+r);
QPoint rightCenter(x+w-r,y+r);
QPoint leftTop(x+r,y);
QPoint rightBottom(x+w-r,y+h);
QRect leftSemicircleRect(x,y,h,h);
QRect rightSemicircleRect(x+w-h,y,h,h);
QPainterPath semicircleEdgeRectanglePath;
semicircleEdgeRectanglePath.moveTo(leftCenter);
semicircleEdgeRectanglePath.arcTo(leftSemicircleRect,90,180);
semicircleEdgeRectanglePath.lineTo(rightBottom);
semicircleEdgeRectanglePath.arcTo(rightSemicircleRect,270,180);
semicircleEdgeRectanglePath.lineTo(leftTop);
semicircleEdgeRectanglePath.closeSubpath();
return semicircleEdgeRectanglePath;
}
void CWidget::paintEvent(QPaintEvent *event)
{
int x = 0, y = 0, w = 120, h = 30;
QRect rect(x,y,w,h);
painter.setPen(Qt::NoPen);
painter.setBrush(QColor(qRgb(20, 28, 43)));
QPainterPath linePath = this->makeSemicircleEdgeRectanglePath(rect);
painter.drawPath(linePath);
QPoint hLPoint(QPoint(rect.x() + rect.height()/2, rect.y()));
QPoint hRPoint(QPoint(rect.x() + rect.width() + rect.y()/2 - rect.height()/2, rect.y()));
QPoint uLPoint(rect.x() + rect.height()/2, rect.y() + rect.height()/2 + rect.height()/2);
QPoint uRPoint(rect.x() + rect.width() - rect.height()/2, rect.y() + rect.height()/2 + rect.height()/2);
QPen newPen;
newPen.setColor(Qt::white);
painter.setPen(newPen);
painter.setBrush(QColor(qRgb(255, 255, 255)));
painter.drawLine(hLPoint, hRPoint);
painter.drawLine(uLPoint, uRPoint);
QPen pen(Qt::white);
painter.setPen(pen);
QFont font;
font.setFamily("Microsoft Yahei");
font.setWeight(65);
painter.setFont(font);
QTextOption option;
option.setAlignment(Qt::AlignCenter);
painter.drawText(rect, "设置", option);
}

以上已实现重绘两边半圆中间矩形，并可以在这个图形里重绘文字，想要在在两边半圆和中间矩形的那两条边都画上颜色，即如代码里，我已将矩形的上下两边都画成白色了，有什么办法或什么接口能将两边半圆的边框也画成白色吗？并且能不能给的矩形上下两条线和两边半圆的圆弧画的线加粗呢？

各位大佬，劳烦帮忙看看，给点意见，小弟在此多谢了！

分享到 淘江湖新浪 QQ微博 QQ空间开心人人豆瓣网易微博百度鲜果白社会飞信

离线tanyue.esec

新手上路

只看该作者 1楼发表于: 2022-05-17

用CSS很方便的吧。

半圆可以用border-radius来实现，border-radius: 15px，设置radius的像素为高度的一半就可以实现半圆弧
边框也可以用border属性，border: 2px solid white，2像素的白色实线，border也可以单独设置四个边，border-left，border-right等，左右加粗就可以单独设置左右的像素。

供参考

共1条评分，贡献值+1

lwei24

贡献值 +1

-

2022-05-17

离线lwei24

骑士

只看该作者 2楼发表于: 2022-05-17

回 tanyue.esec 的帖子

tanyue.esec:用CSS很方便的吧。
半圆可以用border-radius来实现，border-radius: 15px，设置radius的像素为高度的一半就可以实现半圆弧
边框也可以用border属性，border: 2px solid white，2像素的白色实线，border也可以单独设置四个边，border-left，border-right等，左右加粗就可以单独设 .. (2022-05-17 08:37)