少儿编程自学网站网页开发者工具

在Qt中绘制不规则控件可通过设置遮罩（Mask）实现。以下是详细步骤:

1. ‌继承目标控件‌：如QPushButton或QWidget。
2. ‌重写resizeEvent‌：当控件大小变化时，更新遮罩形状。
3. ‌创建遮罩区域‌：使用QRegion或QPainterPath定义形状（如圆形、多边形）。
4. ‌应用遮罩‌：使用setMask方法设置控件的可见区域。
5. ‌重写paintEvent‌：绘制控件外观，确保与遮罩一致。
6. ‌处理事件区域‌：如重写hitButton检查点击事件是否在遮罩内。

一、示例代码：圆形按钮

#include <QPushButton>
#include <QPainter>
#include <QResizeEvent>
#include <QRegion>class CircleButton : public QPushButton {
public:CircleButton(QWidget *parent = nullptr) : QPushButton(parent) {setFixedSize(100, 100); // 建议设置为正方形以确保正圆}protected:void resizeEvent(QResizeEvent *event) override {// 创建圆形遮罩QRegion region(rect(), QRegion::Ellipse);setMask(region);QPushButton::resizeEvent(event);}void paintEvent(QPaintEvent *event) override {QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing); // 抗锯齿painter.setBrush(Qt::blue); // 填充颜色painter.drawEllipse(rect()); // 绘制圆形painter.setPen(Qt::white);painter.drawText(rect(), Qt::AlignCenter, "Click Me"); // 文字}bool hitButton(const QPoint &pos) const override {// 判断点击位置是否在圆内QPoint center = rect().center();int radius = width() / 2;int dx = pos.x() - center.x();int dy = pos.y() - center.y();return (dx*dx + dy*dy) <= (radius * radius);}
};

二、示例代码：不规则窗口

#include <QMainWindow>
#include <QPainter>
#include <QRegion>class MainWindow : public QMainWindow {
public:MainWindow(QWidget *parent = nullptr) : QMainWindow(parent) {setWindowFlags(Qt::FramelessWindowHint); // 无边框setAttribute(Qt::WA_TranslucentBackground); // 透明背景resize(300, 300);}protected:void paintEvent(QPaintEvent *event) override {QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.setBrush(Qt::blue);painter.drawEllipse(rect()); // 绘制窗口内容}void resizeEvent(QResizeEvent *event) override {QRegion region(rect(), QRegion::Ellipse);setMask(region); // 设置窗口遮罩}
};

三、图像遮罩创建不规则形状的窗口

文件 mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QPixmap>
#include <QMouseEvent>class MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();protected:void paintEvent(QPaintEvent *event) override;   // 绘制窗口void mousePressEvent(QMouseEvent *event) override; // 点击事件void mouseMoveEvent(QMouseEvent *event) override;  // 拖动窗口private:QPixmap m_pixmap;      // 存储形状图片QPoint m_dragPos;      // 记录拖动位置bool isPointValid(const QPoint &pos); // 检查点击位置是否有效
};#endif // MAINWINDOW_H

文件 mainwindow.cpp

#include "mainwindow.h"
#include <QPainter>
#include <QBitmap>
#include <QDebug>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)
{// 加载图片（确保资源路径正确）m_pixmap.load(":/images/shape.png");if (m_pixmap.isNull()) {qWarning("Failed to load image!");return;}// 设置窗口属性setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);setAttribute(Qt::WA_TranslucentBackground);setFixedSize(m_pixmap.size()); // 窗口大小与图片一致// 设置遮罩（仅显示非透明区域）setMask(m_pixmap.mask());
}MainWindow::~MainWindow() {}// 绘制窗口
void MainWindow::paintEvent(QPaintEvent *event)
{Q_UNUSED(event);QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing); // 抗锯齿painter.drawPixmap(0, 0, m_pixmap);
}// 检查点击位置是否在非透明区域
bool MainWindow::isPointValid(const QPoint &pos)
{if (m_pixmap.isNull()) return true;return m_pixmap.toImage().pixelColor(pos).alpha() > 0;
}// 鼠标按下事件
void MainWindow::mousePressEvent(QMouseEvent *event)
{if (event->button() == Qt::LeftButton && isPointValid(event->pos())) {m_dragPos = event->globalPos() - frameGeometry().topLeft();event->accept();} else {event->ignore(); // 透明区域不响应点击}
}// 鼠标拖动事件
void MainWindow::mouseMoveEvent(QMouseEvent *event)
{if (event->buttons() & Qt::LeftButton) {move(event->globalPos() - m_dragPos);event->accept();}
}

文件 main.cpp

#include "mainwindow.h"
#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);MainWindow w;w.show();return a.exec();
}

关键代码解释

1. ‌设置遮罩‌

   setMask(m_pixmap.mask()); // 使用图片的 alpha 通道生成遮罩

   这一步使得窗口仅显示图片的非透明区域。

2. ‌透明背景‌

   setAttribute(Qt::WA_TranslucentBackground); 
   setWindowFlags(Qt::FramelessWindowHint);

   确保窗口背景透明，避免残留默认边框。

3. ‌点击有效性检查‌

   bool MainWindow::isPointValid(const QPoint &pos) {return m_pixmap.toImage().pixelColor(pos).alpha() > 0;
   }
   

   通过检查像素的透明度，决定是否响应点击事件。