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

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

效果如下:

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

完整代码如下:

头文件

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

源文件:

cpp 复制代码
#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();
}
相关推荐
一颗花生米。15 分钟前
深入理解JavaScript 的原型继承
java·开发语言·javascript·原型模式
问道飞鱼16 分钟前
Java基础-单例模式的实现
java·开发语言·单例模式
学习使我快乐0119 分钟前
JS进阶 3——深入面向对象、原型
开发语言·前端·javascript
通信仿真实验室1 小时前
(10)MATLAB莱斯(Rician)衰落信道仿真1
开发语言·matlab
勿语&1 小时前
Element-UI Plus 暗黑主题切换及自定义主题色
开发语言·javascript·ui
吾爱星辰5 小时前
Kotlin 处理字符串和正则表达式(二十一)
java·开发语言·jvm·正则表达式·kotlin
ChinaDragonDreamer5 小时前
Kotlin:2.0.20 的新特性
android·开发语言·kotlin
IT良5 小时前
c#增删改查 (数据操作的基础)
开发语言·c#
Kalika0-06 小时前
猴子吃桃-C语言
c语言·开发语言·数据结构·算法
_.Switch6 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j