Qt中绘制不规则控件

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

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

一、示例代码:圆形按钮

cpp 复制代码
#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);
    }
};

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

cpp 复制代码
#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

cpp 复制代码
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPixmap>
#include <QMouseEvent>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    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

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

cpp 复制代码
#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

关键代码解释

  1. 设置遮罩

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

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

  2. 透明背景

    cpp 复制代码
    setAttribute(Qt::WA_TranslucentBackground); 
    setWindowFlags(Qt::FramelessWindowHint);

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

  3. 点击有效性检查

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

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

相关推荐
南瓜胖胖1 小时前
【R语言编程——数据调用】
开发语言·r语言
henreash1 小时前
C# dll版本冲突解决方案
开发语言·c#
黎䪽圓1 小时前
【Java多线程从青铜到王者】单例设计模式(八)
java·开发语言·设计模式
摸鱼仙人~2 小时前
Redux Toolkit 快速入门指南:createSlice、configureStore、useSelector、useDispatch 全面解析
开发语言·javascript·ecmascript
小灰灰搞电子2 小时前
Qt多线程访问同一个数据库源码分享(基于Sqlite实现)
数据库·qt·sqlite
onlooker66662 小时前
Go 语言底层(四) : 深入 Context 上下文
开发语言·数据库·golang
Bardb2 小时前
01__C++入门
c++·qt
若水晴空初如梦3 小时前
QT聊天项目DAY14
开发语言·qt
幼稚园的山代王3 小时前
python3基础语法梳理(一)
开发语言·python