Qt 图片预览(等比例显示、放大、缩小、平移图像)显示

使用Qt的Painter绘制图像并显示,根据窗口的大小计算图片显示的尺寸,并可以对图片放大和缩小的显示,还可以对已经放大了的图片进行平移预览的操作。

效果如下:
图片预览

  • 使用函数 painter.translate() 对画布进行平移操作。
  • 使用函数 painter.scale() 对画布进行缩放的操作。

完整代码如下:

头文件:

#ifndef IMAGE_VIEW_H
#define IMAGE_VIEW_H
#include <QWidget>
#include <QImage>

class ImageView : public QWidget
{
	Q_OBJECT

public:
	ImageView(QWidget *parent = nullptr);
	~ImageView();

protected:
	void contextMenuEvent(QContextMenuEvent *event) override;
	void paintEvent(QPaintEvent *event) override;
	void wheelEvent(QWheelEvent *event) override;
	void mousePressEvent(QMouseEvent *event) override;
	void mouseMoveEvent(QMouseEvent *event) override;
	void mouseReleaseEvent(QMouseEvent *event) override;

private:
	QImage m_Image;
	qreal m_ZoomValue = 1.0;
	int m_XPtInterval = 0;
	int m_YPtInterval = 0;
	QPoint m_OldPos;
	bool m_Pressed = false;

private slots:
	void onLoadImage(void);
	void onZoomInImage(void);
	void onZoomOutImage(void);
	void onPresetImage(void);
};
#endif

源文件:

#include "ImageView.h"
#include <QMenu>
#include <QContextMenuEvent>
#include <QStyleOption>
#include <QPainter>
#include <QFileDialog>

ImageView::ImageView(QWidget *parent)
{

}

ImageView::~ImageView()
{

}

void ImageView::contextMenuEvent(QContextMenuEvent *event)
{
	QPoint pos = event->pos();
	pos = this->mapToGlobal(pos);
	QMenu *menu = new QMenu(this);

	QAction *loadImage = new QAction(tr("Load Image"));
	QObject::connect(loadImage, &QAction::triggered, this, &ImageView::onLoadImage);
	menu->addAction(loadImage);
	menu->addSeparator();

	QAction *zoomInAction = new QAction(tr("Zoom In"));
	QObject::connect(zoomInAction, &QAction::triggered, this, &ImageView::onZoomInImage);
	menu->addAction(zoomInAction);

	QAction *zoomOutAction = new QAction(tr("Zoom Out"));
	QObject::connect(zoomOutAction, &QAction::triggered, this, &ImageView::onZoomOutImage);
	menu->addAction(zoomOutAction);

	QAction *presetAction = new QAction(tr("Preset"));
	QObject::connect(presetAction, &QAction::triggered, this, &ImageView::onPresetImage);
	menu->addAction(presetAction);

	menu->exec(pos);
}

void ImageView::paintEvent(QPaintEvent *event)
{
	// 绘制样式
	QStyleOption opt;
	opt.init(this);
	QPainter painter(this);
	style()->drawPrimitive(QStyle::PE_Widget, &opt, &painter, this);

	if (m_Image.isNull())
		return QWidget::paintEvent(event);

	// 根据窗口计算应该显示的图片的大小
	int width = qMin(m_Image.width(), this->width());
	int height = width * 1.0 / (m_Image.width() * 1.0 / m_Image.height());
	height = qMin(height, this->height());
	width = height * 1.0 * (m_Image.width() * 1.0 / m_Image.height());

	// 平移
	painter.translate(this->width() / 2 + m_XPtInterval, this->height() / 2 + m_YPtInterval);

	// 缩放
	painter.scale(m_ZoomValue, m_ZoomValue);

	// 绘制图像
	QRect picRect(-width / 2, -height / 2, width, height);
	painter.drawImage(picRect, m_Image);
}

void ImageView::wheelEvent(QWheelEvent *event)
{
	int value = event->delta();
	if (value > 0)
		onZoomInImage();
	else
		onZoomOutImage();

	this->update();
}

void ImageView::mousePressEvent(QMouseEvent *event)
{
	m_OldPos = event->pos();
	m_Pressed = true;
}

void ImageView::mouseMoveEvent(QMouseEvent *event)
{
	if (!m_Pressed)
		return QWidget::mouseMoveEvent(event);

	this->setCursor(Qt::SizeAllCursor);
	QPoint pos = event->pos();
	int xPtInterval = pos.x() - m_OldPos.x();
	int yPtInterval = pos.y() - m_OldPos.y();

	m_XPtInterval += xPtInterval;
	m_YPtInterval += yPtInterval;

	m_OldPos = pos;
	this->update();
}

void ImageView::mouseReleaseEvent(QMouseEvent *event)
{
	m_Pressed = false;
	this->setCursor(Qt::ArrowCursor);
}

void ImageView::onLoadImage(void)
{
	QString imageFile = QFileDialog::getOpenFileName(this, "Open Image", "./", tr("Images (*.png *.xpm *.jpg)"));

	QFile file(imageFile);
	if (!file.exists())
		return;

	m_Image.load(imageFile);
}

void ImageView::onZoomInImage(void)
{
	m_ZoomValue += 0.2;
	this->update();
}

void ImageView::onZoomOutImage(void)
{
	m_ZoomValue -= 0.2;
	if (m_ZoomValue <= 0)
	{
		m_ZoomValue += 0.2;
		return;
	}

	this->update();
}

void ImageView::onPresetImage(void)
{
	m_ZoomValue = 1.0;
	m_XPtInterval = 0;
	m_YPtInterval = 0;
	this->update();
}

可以使用Qt自带的QGraphicsView和QGraphicsScene实现拖动、放大缩小显示图片的控件。 首先,需要在Qt Creator中创建一个Qt Widgets应用程序,并在主窗口中添加一个QGraphicsView控件。然后在mainwindow.h文件中添加如下代码: ``` private: QGraphicsScene *scene; QPixmap pixmap; ``` 在mainwindow.cpp文件中初始化QGraphicsView和QGraphicsScene,并将QGraphicsScene设置为QGraphicsView的场景: ``` MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); // 初始化QGraphicsView和QGraphicsScene scene = new QGraphicsScene(this); ui->graphicsView->setScene(scene); // 加载图片 pixmap = QPixmap("your_image_path"); scene->addPixmap(pixmap); } ``` 接下来,实现拖动功能。可以通过设置QGraphicsView的拖动模式来实现。在mainwindow.cpp文件中添加如下代码: ``` // 设置拖动模式为ScrollHandDrag ui->graphicsView->setDragMode(QGraphicsView::ScrollHandDrag); ``` 实现放大缩小功能需要使用QGraphicsView的缩放功能。在mainwindow.cpp文件中添加如下代码: ``` // 设置缩放倍率 ui->graphicsView->setRenderHint(QPainter::SmoothPixmapTransform); ui->graphicsView->setTransformationAnchor(QGraphicsView::AnchorUnderMouse); ui->graphicsView->setResizeAnchor(QGraphicsView::AnchorUnderMouse); // 设置最小缩放比例和最大缩放比例 ui->graphicsView->setMinimumSize(50, 50); ui->graphicsView->setMaximumSize(2000, 2000); // 实现放大缩小功能 ui->graphicsView->setInteractive(true); ui->graphicsView->setWheelScrollLines(1); ui->graphicsView->setDragMode(QGraphicsView::ScrollHandDrag); ui->graphicsView->viewport()->installEventFilter(this); ``` 最后,在mainwindow.cpp中实现eventFilter函数,处理鼠标滚轮事件: ``` bool MainWindow::eventFilter(QObject *obj, QEvent *event) { if (event->type() == QEvent::Wheel && ui->graphicsView->hasFocus()) { QWheelEvent *wheel = static_cast<QWheelEvent*>(event); if (wheel->modifiers() & Qt::ControlModifier) { if (wheel->angleDelta().y() > 0) { ui->graphicsView->scale(1.2, 1.2); } else if (wheel->angleDelta().y() < 0) { ui->graphicsView->scale(1 / 1.2, 1 / 1.2); } return true; } } return QMainWindow::eventFilter(obj, event); } ``` 这样就完成了一个实现拖动、放大缩小显示图片的控件。
评论 45
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值