首页 > 技术知识 > 正文

Qt自定义控件圆角

Qt中绘制圆角有两种方法:样式表、绘图事件自绘圆角

一、样式表:

setStyleSheet(“QWidget{border-radius:5px;}”)); 使用的主要是使用border-radius 属性,关于这个属性,可选的样式有 border-top-left-radius 设置左上角圆角; border-top-right-radius 设置右上角圆角; border-bottom-left-radius 设置左下角圆角; border-bottom-right-radius 设置右下角圆角; border-radius 设置四个角圆角; border-radius 参数: 一个参数代表X轴和Y轴方向的半径相同 两个参数分别代表X轴和Y轴方向的半径

二、绘图事件 绘制四个角圆角: void QWidget::paintEvent(QPaintEvent *event) { Q_UNUSED(event) QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // 抗锯齿 painter.setPen(QPen(QColor(101, 132, 236),4)); painter.setBrush(QColor(32, 38, 74)); painter.drawRoundedRect(this->rect(),10,10); } 单独绘制圆角: void QWidget::paintEvent(QPaintEvent * event) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // 抗锯齿 painter.setClipping(true); QPainterPath Area; // 能画上的区域 Area.addRoundedRect(rect(), 30, 30); Area.setFillRule(Qt::WindingFill); // 多块区域组合填充模式 switch (m_type) { case LeftTop:// 左上角圆角 { Area.addRect(0, height() – 30, 30, 30); // 填充左下角 Area.addRect(width() – 30, 0, 30, 30); // 填充右上角 Area.addRect(width() – 30, height() – 30, 30, 30);// 填充右下角 break; } case RightTop: // 右上角圆角 { Area.addRect(0, height() – 30, 30, 30); // 填充左下角 Area.addRect(0, 0, 30, 30); // 填充左上角 Area.addRect(width() – 30, height() – 30, 30, 30);// 填充右下角 break; } case LeftBottom:// 左下角圆角 { Area.addRect(width() – 30, 0, 30, 30); // 填充右上角 Area.addRect(width() – 30, height() – 30, 30, 30);// 填充右下角 Area.addRect(0, 0, 30, 30); // 填充左上角 break; } case RightBottom: // 右下角圆角 { Area.addRect(0, height() – 30, 30, 30); // 填充左下角 Area.addRect(width() – 30, 0, 30, 30); // 填充右上角 Area.addRect(0, 0, 30, 30); // 填充左上角 break; } case Top: // 上两个圆角 { Area.addRect(0, height() – 30, 30, 30); // 填充左下角 Area.addRect(width() – 30, height() – 30, 30, 30);// 填充右下角 break; } case Bottom: // 下两个圆角 { Area.addRect(width() – 30, 0, 30, 30); // 填充右上角 Area.addRect(0, 0, 30, 30); // 填充左上角 break; } case Left: // 左两个圆角 { Area.addRect(width() – 30, 0, 30, 30); // 填充右上角 Area.addRect(width() – 30, height() – 30, 30, 30);// 填充右下角 break; } case Right: // 右两个圆角 { Area.addRect(0, height() – 30, 30, 30); // 填充左下角 Area.addRect(0, 0, 30, 30); // 填充左上角 break; } case All: // 四个角圆角 { break; } default: break; } painter.setClipPath(Area); QColor color(Qt::darkRed); painter.setPen(Qt::NoPen); painter.setBrush(color); painter.drawRect(rect()); }
<

效果示意图: 左上角: Qt自定义控件圆角 右上角: Qt自定义控件圆角1 左下角: Qt自定义控件圆角2 右下角: Qt自定义控件圆角3 四个角圆角: Qt自定义控件圆角4

猜你喜欢