【QML】用 Image(QQuickPaintedItem) 显示图片

2024-06-24 06:28
文章标签 显示 图片 image qml qquickpainteditem

本文主要是介绍【QML】用 Image(QQuickPaintedItem) 显示图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  1. 大体功能：
  • 频繁地往界面推送图片，帧率达到视频效果。
  • 捕获画布上的鼠标事件和键盘事件。
  1. 代码如下：
// DrawImageInQQuickPaintedItem.pro 代码如下：
QT += quick# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0SOURCES += \drawimagectrl.cpp \imagepainter.cpp \main.cppRESOURCES += qml.qrc# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += targetHEADERS += \drawimagectrl.h \imagepainter.hLIBS += -lopencv_core \-lopencv_imgcodecs// imagepainter.h 代码如下：
#ifndef IMAGEPAINTER_H
#define IMAGEPAINTER_H#include <QQuickPaintedItem>
#include <QImage>#define QML_WRITABLE_PROPERTY(type, name) \protected: \Q_PROPERTY (type name READ get_##name WRITE set_##name NOTIFY name##Changed) \type m_##name; \public: \type get_##name () const { \return m_##name ; \} \public Q_SLOTS: \bool set_##name (type name) { \bool ret = false; \if ((ret = m_##name != name)) { \m_##name = name; \emit name##Changed (m_##name); \} \return ret; \} \Q_SIGNALS: \void name##Changed (type name); \private:class MyQImage : public QObject
{Q_OBJECT
public:explicit MyQImage(QObject *parent = nullptr) : QObject(parent) {}~MyQImage() = default;void setImage(const QImage &img) { m_img = img; }const QImage &getImage() const { return m_img; }private:QImage m_img;
};class ImagePainter : public QQuickPaintedItem
{Q_OBJECTQML_WRITABLE_PROPERTY(MyQImage*, pImage)QML_WRITABLE_PROPERTY(int, nFillMode)public:explicit ImagePainter(QQuickItem *parent = nullptr);void paint(QPainter *painter) override;
};#endif // IMAGEPAINTER_H// imagepainter.cpp 代码如下：
#include "imagepainter.h"
#include <QPainter>ImagePainter::ImagePainter(QQuickItem *parent): QQuickPaintedItem(parent), m_pImage(nullptr), m_nFillMode(0)
{connect(this, &ImagePainter::pImageChanged,[this]{if(m_pImage) {setImplicitWidth(m_pImage->getImage().width());setImplicitHeight(m_pImage->getImage().height());}else {setImplicitWidth(0);setImplicitHeight(0);}update();});
}void ImagePainter::paint(QPainter *painter)
{if(m_pImage) {const QImage &image = m_pImage->getImage();if (image.isNull()) {return;}switch (m_nFillMode) {case 1 /* PreserveAspectFit */: {QImage scaledImage = image.scaled(width(), height(), Qt::KeepAspectRatio);double x = (width() - scaledImage.width()) / 2;double y = (height() - scaledImage.height()) / 2;painter->drawImage(QPoint(x, y), scaledImage);break;}case 0 /* Stretch */:default: {painter->drawImage(QPoint(0, 0), image.scaled(width(), height()));}}}
}// drawimagectrl.h 代码如下：
#ifndef DRAWIMAGECTRL_H
#define DRAWIMAGECTRL_H#include <QObject>
#include "opencv2/opencv.hpp"
#include "imagepainter.h"#define SINGLETON(x)     \
private: \x(x const&); \void operator=(x const&); \
public: \
static x* getInstance(QObject *parent = 0) \
{ \static bool first=true; \if ((parent == 0) && (first == true)) { qCritical("Incorrect Initialisation - no parent and first"); } \if ((parent != 0) && (first == false)) { qCritical("Incorrect Initialisation - parent and not first"); } \first = false; \static x *instance = new x(parent); \return instance; \
} \
private:#define QML_CONSTANT_PROPERTY(type, name) \protected: \Q_PROPERTY (type name READ get_##name CONSTANT) \type m_##name; \public: \type get_##name () const { \return m_##name ; \} \private:class DrawImageCtrl : public QObject
{Q_OBJECTSINGLETON(DrawImageCtrl)QML_CONSTANT_PROPERTY(MyQImage*, pSceneImage)public:explicit DrawImageCtrl(QObject *parent = nullptr);~DrawImageCtrl();public slots:void sltTestDrawImage();// 辅助事件void sltWindowWidthChanged(qreal lfWindowWidth);void sltWindowHeightChanged(qreal lfWindowHeight);// 鼠标事件void sltMousePressed(qreal lfX, qreal lfY, quint32 nButtonValue);void sltMouseReleased(qreal lfX, qreal lfY, quint32 nButtonValue);// 键盘事件void sltKeyPressed(int nKey);void sltKeyReleased(int nKey);signals:void sigImageUpdate();private:void showImage(const cv::Mat &mat);private:// 界面属性qreal m_lfWindowWidth;qreal m_lfWindowHeight;double m_lfLastMouseX;double m_lfLastMouseY;// 快照属性double m_lfZoomFactor;double m_lfImgX;double m_lfImgY;
};#endif // DRAWIMAGECTRL_H// drawimagectrl.cpp 代码如下：
#include "drawimagectrl.h"
#include <QTimer>
#include <QDebug>DrawImageCtrl::DrawImageCtrl(QObject *parent): QObject(parent), m_pSceneImage(new MyQImage(this)), m_lfWindowWidth(0.0), m_lfWindowHeight(0.0), m_lfLastMouseX(-1), m_lfLastMouseY(-1), m_lfZoomFactor(1.0), m_lfImgX(0.0), m_lfImgY(0.0)
{}DrawImageCtrl::~DrawImageCtrl()
{if(nullptr != m_pSceneImage){delete m_pSceneImage;m_pSceneImage = nullptr;}
}void DrawImageCtrl::sltTestDrawImage()
{static int i = 0;QString sPicFileName = QString::fromUtf8("/home/xiaohuamao/mycode/DrawImageInQQuickPaintedItem/TestPic/%1.png").arg(i);if(++i >= 100)i = 0;cv::Mat image = cv::imread(sPicFileName.toStdString());showImage(image);QTimer::singleShot(10, this, &DrawImageCtrl::sltTestDrawImage);
}void DrawImageCtrl::sltWindowWidthChanged(qreal lfWindowWidth)
{m_lfWindowWidth = lfWindowWidth;
}void DrawImageCtrl::sltWindowHeightChanged(qreal lfWindowHeight)
{m_lfWindowHeight = lfWindowHeight;
}void DrawImageCtrl::sltMousePressed(qreal lfX, qreal lfY, quint32 nButtonValue)
{qDebug() << QString::fromUtf8("sltMousePressed x:%1,y:%2,btn:%3").arg(lfX).arg(lfY).arg(nButtonValue);
}void DrawImageCtrl::sltMouseReleased(qreal lfX, qreal lfY, quint32 nButtonValue)
{qDebug() << QString::fromUtf8("sltMouseReleased x:%1,y:%2,btn:%3").arg(lfX).arg(lfY).arg(nButtonValue);
}void DrawImageCtrl::sltKeyPressed(int nKey)
{qDebug() << QString::fromUtf8("sltKeyPressed nKey:%1").arg(nKey);
}void DrawImageCtrl::sltKeyReleased(int nKey)
{qDebug() << QString::fromUtf8("sltKeyReleased nKey:%1").arg(nKey);
}QImage cvMatToQImage( const cv::Mat &inMat )
{switch ( inMat.type() ){// 8-bit, 4 channelcase CV_8UC4:{QImage image( inMat.data,inMat.cols, inMat.rows,static_cast<int>(inMat.step),QImage::Format_ARGB32 );return image;}// 8-bit, 3 channelcase CV_8UC3:{QImage image( inMat.data,inMat.cols, inMat.rows,static_cast<int>(inMat.step),QImage::Format_RGB888 );return image.rgbSwapped();}// 8-bit, 1 channelcase CV_8UC1:{
#if QT_VERSION >= QT_VERSION_CHECK(5, 5, 0)QImage image( inMat.data,inMat.cols, inMat.rows,static_cast<int>(inMat.step),QImage::Format_Grayscale8 );
#elsestatic QVector<QRgb>  sColorTable;// only create our color table the first timeif ( sColorTable.isEmpty() ){sColorTable.resize( 256 );for ( int i = 0; i < 256; ++i ){sColorTable[i] = qRgb( i, i, i );}}QImage image( inMat.data,inMat.cols, inMat.rows,static_cast<int>(inMat.step),QImage::Format_Indexed8 );image.setColorTable( sColorTable );
#endifreturn image;}default:qWarning() << "cvMatToQImage() - cv::Mat image type not handled in switch:" << inMat.type();break;}return QImage();
}void DrawImageCtrl::showImage(const cv::Mat &mat)
{cv::Mat image = mat.clone();m_pSceneImage->setImage(cvMatToQImage(mat));auto lfAspectRatio = 1. * image.cols / image.rows;auto lfAspectRatio2 = 1. * m_lfWindowWidth / m_lfWindowHeight;auto lfFactor = 1.0;if (lfAspectRatio > lfAspectRatio2)lfFactor = 1. * m_lfWindowWidth / image.cols;elselfFactor = 1. * m_lfWindowHeight / image.rows;double lfImgX = (m_lfWindowWidth / lfFactor - image.cols) / 2;double lfImgY = (m_lfWindowHeight / lfFactor - image.rows) / 2;emit sigImageUpdate();m_lfZoomFactor = lfFactor;m_lfImgX = lfImgX;m_lfImgY = lfImgY;
}// main.cpp 代码如下：
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "drawimagectrl.h"
#include "imagepainter.h"void initDrawImage(QQmlApplicationEngine &engine)
{qmlRegisterType<ImagePainter>("MyItem", 1, 0, "ImagePainter");engine.rootContext()->setContextProperty(QLatin1String("drawImageCtrl"), DrawImageCtrl::getInstance());
}int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endifQGuiApplication app(argc, argv);QQmlApplicationEngine engine;const QUrl url(QStringLiteral("qrc:/main.qml"));QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,&app, [url](QObject *obj, const QUrl &objUrl) {if (!obj && url == objUrl)QCoreApplication::exit(-1);}, Qt::QueuedConnection);initDrawImage(engine);engine.load(url);return app.exec();
}// main.qml 代码如下：
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")DrawImage {anchors.fill: parent}Button {text: "draw"onClicked: {drawImageCtrl.sltTestDrawImage();}}
}// DrawImage.qml 代码如下：
import QtQuick 2.0
import MyItem 1.0Rectangle {id : canvasRectConnections{target: drawImageCtrlfunction onSigImageUpdate(){idSceneImage.update();}}Image {id: imgCanvaswidth: parent.widthheight: parent.heightanchors.fill: parentImagePainter {id: idSceneImageanchors.fill: parentnFillMode: Image.PreserveAspectFitpImage: drawImageCtrl.pSceneImagevisible: true}MouseArea {anchors.fill: parenthoverEnabled: truepropagateComposedEvents: trueacceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MidButtononEntered: {imgCanvas.forceActiveFocus();}onPressed: {drawImageCtrl.sltMousePressed(mouse.x, mouse.y, mouse.button);}onReleased: {drawImageCtrl.sltMouseReleased(mouse.x, mouse.y, mouse.button);}}Keys.onPressed: {drawImageCtrl.sltKeyPressed(event.key);}Keys.onReleased: {drawImageCtrl.sltKeyReleased(event.key);}onWidthChanged: {drawImageCtrl.sltWindowWidthChanged(imgCanvas.width);}onHeightChanged: {drawImageCtrl.sltWindowHeightChanged(imgCanvas.height);}}onVisibleChanged: {if(canvasRect.visible) {imgCanvas.focus = true;}else {imgCanvas.focus = false;}}onFocusChanged: {if(canvasRect.focus)imgCanvas.focus = true;}
}

这篇关于【QML】用 Image(QQuickPaintedItem) 显示图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1089415。

相关文章

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始，按照书籍的划分，第10章开始就进入保护模式（Protected Mode）部分了，感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断（Interrupt）的设计，中断的几种方式：外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用： 为了更好的利用处理器的性能。协同快速和慢速设备一起工作
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
安卓链接正常显示，ios#符被转义%23导致链接访问404

安卓链接正常显示，ios#符被转义%23导致链接访问404

原因分析： url中含有特殊字符 中文未编码 都有可能导致URL转换失败，所以需要对url编码处理  如下： guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时，会被误伤转义为%23，导致链接无法访问
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
Spring MVC 图片上传

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-
阅读更多...
Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式，需要不断条件和优化提示词。记录一下调整好的提示词，以后在继续优化迭代。 1. 提示词 英文版本： You are an AI assistant tasked with extracting the content of
阅读更多...
lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局，其中 label 控件位于 image 控件下方，你可以使用 lv_obj_set_flex_flow 来设置布局为垂直，并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例： 创建父容器：首先创建一个容器对象，该对象将作为布局的基础。设置容器为垂直布局：使用 lv_obj_set_flex_flow 设置容器
阅读更多...
C# dateTimePicker 显示年月日，时分秒

C# dateTimePicker 显示年月日，时分秒

dateTimePicker默认只显示日期，如果需要显示年月日，时分秒，只需要以下两步： 1.dateTimePicker1.Format = DateTimePickerFormat.Time 2.dateTimePicker1.CustomFormat = yyyy-MM-dd HH:mm:ss Tips:  a. dateTimePicker1.ShowUpDown = t
阅读更多...
研究人员在RSA大会上演示利用恶意JPEG图片入侵企业内网

研究人员在RSA大会上演示利用恶意JPEG图片入侵企业内网

安全研究人员Marcus Murray在正在旧金山举行的RSA大会上公布了一种利用恶意JPEG图片入侵企业网络内部Windows服务器的新方法。  攻击流程及漏洞分析 最近，安全专家兼渗透测试员Marcus Murray发现了一种利用恶意JPEG图片来攻击Windows服务器的新方法，利用该方法还可以在目标网络中进行特权提升。几天前，在旧金山举行的RSA大会上，该Marcus现场展示了攻击流程，
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2