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

于 2024-06-23 17:55:27 发布
阅读量508 收藏 3
点赞数 7
分类专栏： 【QML】相关 文章标签： qt c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_38647413/article/details/139903681
版权
  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.0

SOURCES += \
        drawimagectrl.cpp \
        imagepainter.cpp \
        main.cpp

RESOURCES += 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 += target

HEADERS += \
    drawimagectrl.h \
    imagepainter.h

LIBS += -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_OBJECT
    QML_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_OBJECT
    SINGLETON(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 channel
      case CV_8UC4:
      {
         QImage image( inMat.data,
                       inMat.cols, inMat.rows,
                       static_cast<int>(inMat.step),
                       QImage::Format_ARGB32 );

         return image;
      }

      // 8-bit, 3 channel
      case CV_8UC3:
      {
         QImage image( inMat.data,
                       inMat.cols, inMat.rows,
                       static_cast<int>(inMat.step),
                       QImage::Format_RGB888 );

         return image.rgbSwapped();
      }

      // 8-bit, 1 channel
      case 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 );
#else
         static QVector<QRgb>  sColorTable;

         // only create our color table the first time
         if ( 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 );
#endif

         return 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;
    else
        lfFactor = 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);
#endif
    QGuiApplication 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.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    DrawImage {
        anchors.fill: parent
    }

    Button {
        text: "draw"

        onClicked: {
            drawImageCtrl.sltTestDrawImage();
        }
    }
}


// DrawImage.qml 代码如下：
import QtQuick 2.0
import MyItem 1.0

Rectangle {
    id : canvasRect

    Connections{
        target: drawImageCtrl

        function onSigImageUpdate(){
            idSceneImage.update();
        }
    }

    Image {
        id: imgCanvas
        width: parent.width
        height: parent.height
        anchors.fill: parent

        ImagePainter {
            id: idSceneImage
            anchors.fill: parent
            nFillMode: Image.PreserveAspectFit
            pImage: drawImageCtrl.pSceneImage
            visible: true
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            propagateComposedEvents: true
            acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MidButton

            onEntered: {
                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;
    }
}
江湖人称菠萝包
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
opencv采集图片qml做显示
10-15
一个opencv在Qt中的小应用，包含了Qt的多线程，QImage与Mat转化；封装了qml接口，还包含了opencv中的一些图片检测和矫正技术
cpp-QML中Image控件升级版利用预解释和预读取提升图片加载速度
08-16
QML中Image控件升级版，利用预解释和预读取，提升图片加载速度
【qml】 在QML场景图中使用QPainter 的方法
最新发布
qq_35662333的博客
04-07 1050
当渲染目标是一个QImage时，QPainter首先渲染到图像中，然后将内容上传到纹理中。1) 要编写自己的绘制项，首先要创建QQuickPaintedItem的一个子类，然后实现其惟一的纯虚拟公共函数paint()，该函数实现实际的绘制。Mipmapping 是一种图像处理技术，它采用一个原始的、高分辨率的纹理图像或映射和过滤器，并在同一个纹理文件中将其扩展为多个分辨率更小的纹理映射。取而代之的是一个比例因子，所以绘画应该仍然发生在0,0到width()，height()。
OPenCV - QML图像处理（1）：在QML中显示OPenCV图片
友善啊，朋友的博客
12-19 6457
写在前面 以前写过一个OPenCV图像处理的工具，界面是这样的： 有兴趣的朋友用用：https://pan.baidu.com/s/16_DYfTnvp8cj7aqzXAlMGQ 提取码:5s9e 这个是用QWidget写的，打算用QML重写一遍，界面用QML，内部逻辑用C++。 不定时更新。 正文 首先要有一个显示图片的控件。根据用 C++ 编写 QML 扩展可知，这可以是一个继承QQuickPaintedItem 的自定义类，在自定义类中实现绘制图片然后将它注册到QML中。这个...
qt中c++获取图片qml实时显示的方式1——继承QQuickPaintedItem
ljn1046016768的博客
06-27 1012
首先，我们需要创建一个自定义的绘制项类。在这个类中，我们将重写的paint方法来实现绘制逻辑。
qml中使用Canvas绘制饼状图
08-09
在qml中使用Canvas绘制饼状图，可以直接使用qmlscene运行,支持Qt5.5及其以上
【QML 画布Canvas】2D绘图（上）
m0_60259116的博客
03-06 964
【QML 画布Canvas】2D绘图（上）
QML类型：Canvas
友善啊，朋友的博客
10-25 1981
一、描述 Canvas 项目允许绘制直线和曲线、简单和复杂的形状、图形和参考图形图像。 它还可以添加文本、颜色、阴影、渐变和图案，并进行低级像素操作。 Canvas 输出可以保存为图像文件或序列化为 URL。 渲染到 Canvas 是使用 Context2D 对象完成的。 二、线程渲染和渲染目标 在 Qt 6.0 中，Canvas 项支持一个渲染目标：Canvas.Image。 Canvas.Image 渲染目标是一个 QImage 对象。 此渲染目标支持后台线程渲染，允许在不阻塞 UI 的情况下
QMLcanvas画板鼠标画图（有预览路径）
10-29
基于qml的canvas画板功能，实现利用鼠标进行画圆画矩形等，有预览路径
QML类型说明-Canvas
杞櫹椅桐的专栏
08-29 3181
Canvas ImportStatement:   import QtQuick 2.2 Since:  Qt 5.0 Inherits:      Item   Properties available :size canvasSize :size canvasWindow: rect context :object contextType: string renderSt
Qt C++发送图片到QML显示
02-25
开发Qt应用时，想把QImage发送到QML端通过Image组件显示出来，这种场景主要用在例如在C++端调用android系统接口截图然后发送到QML端显示，或者C++端QWidget截图然后让QML界面中显示。要想实现该功能，需要用到一个...
QML Image获取资源路径的细节
08-30
在使用`Image`时，理解其获取资源路径的规则至关重要，因为这直接影响到图像是否能正确加载和显示。以下是对QML `Image`组件获取资源路径的详细分析： 首先，`Image`组件的`source`属性用于指定图像的URL路径。这个...
QCamera 图像到QML Image展示
03-28
本篇文章将详细探讨如何利用QCamera捕获图像，并将其显示在QML的Image组件上，实现相机预览与图像展示的功能。 首先，我们需要了解QCamera的基本用法。QCamera对象提供了对设备摄像头的访问和控制，包括设置分辨率...
QML系列教程(2)-载入显示一幅或多幅图片
野生猿-群号1025127672
06-02 1734
import QtQuick 2.0 Item { id: root width: 200 height: width Image{ id: background anchors.fill: parent; source: "qrc:/pic/pic/meter.jpg" } }
【qml】Image 显示网络图片
读书笔记
10-15 967
Image类型可以用来显示一个图像。使用source属性将图像的源指定为一个URL。可以用Qt支持的任何标准图像格式提供图像，包括位图格式(如PNG和JPEG)和矢量图形格式(如SVG)。如果你需要显示动画图像，使用AnimatedSprite或AnimatedImage。如果没有指定宽度和高度属性，图像将自动使用已加载图像的大小。默认情况下，指定项目的宽度和高度将使图像缩放到该大小。这种行为可以通过set来改变。
QML入门教程(15)：图元控件Image
琅嬛福地
03-21 2609
qml的图元控件是Image, 基本使用如下： import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Image{ id:img width:400 height: 400
QML实时加载图片的方式
DefiniteGoal的博客
06-11 651
这种方式需要和qml的Image配置使用，它是通过改变Image的source达到实时改变图片的效果。效果就是点击一次切换一次图片，图片随机显示。
QML学习笔记——图片动态显示（Image与QQuickImageProvider）
LinXifan的博客
07-27 8832
项目中需要一个预览和回显的功能，需要通过udp接收图片数据，并在界面上动态显示，在网上研究一番后，最终选择了`Image`和`QQuickImageProvider`来实现。
【qml】QML Image动态刷新图片来自C++的QImage的一个巨坑
qq_43248127的博客
04-27 2629
最近,需要在QML上显示来自OPenCV的摄像头视频,因为是视频,既好多好多图片,所以需要QML上动态刷新来自C++的QImage 具体怎么搞我就不再赘述,虽然资料不多,但是CSDN上的一篇博客已经写得十分的清楚: Qt C++发送图片到QML显示 但是! 我按照他们的方法,根本无法正常刷新图片,只能显示第一张!!! 我按照他们的方法,根本无法正常刷新图片,只能显示第一张!!! 我按照他们的方法,...
qml image 居中显示
11-11
以下是在QML中居中显示图像的方法： ```qml Image { id: image source: "image.png" anchors.centerIn: parent } ``` 在这个例子中，我们使用了anchors.centerIn属性将图像居中对齐到其父元素。这将确保图像始终在其父元素的中心位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值