qml图片显示器传参版本

QtQuick QML教程(22):图元控件Image Image显示图片,只要是Qt支持的,比如JPG、PNG、BMP、GIF、sVG等都可以显示。它只能显示静态图片,对于GIF等格式,只会把第一帧显示出来。如果要显示动画,则可以使用 AnimatedSprite 或者 AnimatedImage。
Image 的 width 和 height 属性用来设定图元的大小,如果没有设置它们,则使用图片本身的尺寸,如果设置了width 和 height,图片显示时会进行相应的拉伸。 阅读详情

直接上代码了,记录防止以后自己忘记了。。。

main.cpp

#include <cmath>
#include <QtCore/QtDebug>
#include <QtCore/QFile>
//#include <QtGui/QtGui>
#include <QtGui/QGuiApplication>
#include <QQuickItem>
#include <QtQml/QQmlEngine>
#include <QtQml/QQmlContext>
#include <QtGui/QScreen>
#include <QtQuick/QQuickView>
#include <QFileInfo>
#include <QApplication>
#include <QDesktopWidget>
//#include <QWidget>
//#include <QMainWindow>
//#include <QDesktopWidget>

int main(int argc, char *argv[])
{
    if (argc < 2) {
        return 0;
    }

    QApplication app(argc, argv);

    /*
        获取屏幕分辨率
    */
    QDesktopWidget *d = QApplication::desktop();
    int width = d->width();
    int height = d->height();
    int w = width - 140;
    int h = height - 80;
//    qDebug() << "w:" << w;
//    qDebug() << "h:" << h;
    QString file = app.arguments().at(1);
    if (file.isEmpty() || !QFile(file).exists()) {
        qDebug() << "Invalid file:" << file;
        return -1;
    }
    QString title = QFileInfo(file).baseName();
    // Use second parameter as title
    title = app.arguments().at(2);

    QQuickView viewer;
    //设置大小
    viewer.setResizeMode(QQuickView::SizeRootObjectToView);
    //无窗口
    //viewer.setFlags(Qt::FramelessWindowHint);

//    viewer.setFlags(Qt::FramelessWindowHint
//    | Qt::WindowSystemMenuHint
//    | Qt::WindowMinimizeButtonHint
//    | Qt::Window);

    QQmlEngine *engine = viewer.engine();
    engine->rootContext()->setContextProperty("win", &viewer);
    viewer.setSource(QUrl("qrc:///qml/Main.qml"));
    viewer.setTitle(title);
    viewer.show();
//    QDesktopWidget *dwsktopwidget = QApplication::desktop();
        //QRect deskrect = dwsktopwidget->availableGeometry();
//        QRect screenrect = dwsktopwidget->screenGeometry();
//    qCritical("screenrect.w==%s\n",qPrintable(QString::number(screenrect.width())));

    //viewer.setWindowState(Qt::FramelessWindowHint);

    //判断参数个数
    if (argc == 3) {
        viewer.setGeometry(70,30,w,h);
    }
    if(argc == 4){
        viewer.setWindowState(Qt::WindowNoState);
    }
    //viewer.move ((QApplication::desktop()->width() - w.width())/2,(QApplication::desktop()->height() - w.height())/2);
    file.prepend("file:");
    file.replace("\\", "/");
    QMetaObject::invokeMethod(viewer.rootObject(), "init", Q_ARG(QVariant, file));

    return app.exec();
}

main.qml

import QtQuick 2.0
import QtWebKit 3.0
import QtQuick.Window 2.0
Rectangle {
    id: root
    objectName: "root"
    width: 800
    height: 450
    color: "black"
    //传参数
    function init(url) {
        img.source = url;
        console.log("img.source: " + img.source);
    }
    
    Image {
        id: img
        objectName: "img"
        width: parent.width
        height: parent.height
        fillMode: Image.PreserveAspectFit
        x: (root.width-img.width)/2
        y: (root.height-img.height)/2
        rotation: 0
    }
    PinchArea {
        anchors.fill: parent
        pinch.target: img
//            pinch.minimumRotation: -360
//            pinch.maximumRotation: 360
        pinch.minimumScale: 0.5
        pinch.maximumScale: 10
        MouseArea {
            id: dragArea1
//                hoverEnabled: true
            anchors.fill: parent
            drag.target: img
            onPressed: {
                console.log("what`s this?")
                console.log("root.width:",root.width);
                console.log("img.width:",img.width);
                toolbar.toggleVisible()
            }
        }
    }

//    MouseArea {
//        anchors.fill: parent
////        drag.target: root
//        onPressed: {
//            console.log("what`s this?")
//            toolbar.toggleVisible()
//        }
//    }


    Toolbar {
        id: toolbar
        anchors {
            left: parent.left
            bottom: parent.bottom
            right: parent.right
        }
    }

    DropArea {
        anchors.fill: parent
        onEntered: {
            if (!drag.hasUrls)
                return;
            console.log(drag.urls)
            img.source = drag.urls[0]
        }
    }
}
toolBar.qml只是做了播放器的最大化 最小化等功能

import QtQuick 2.0
import QtQuick.Window 2.0
import "app.js" as App

Rectangle {
    id: root
    color: "black"
    opacity: 0.9
    height: 60

    property bool hiding: false
    property int timeFlag: 0
    property bool sendORStop:true

    function toggleFullScreen() {
        maxBtn.checked = !maxBtn.checked
    }

    gradient: Gradient {
        GradientStop { position: 0.0; color: "#aa445566" }
        GradientStop { position: 0.618; color: "#bb1a2b3a" }
        GradientStop { position: 1.0; color: "#ff000000" }
    }

    MouseArea {
        anchors.fill: parent
        onPressed: {
            if (timer.running) //timer may ran a few seconds(<3) ago
                timer.stop();
            root.aniShow()
        }
    }
    Item {
        anchors {
            top: parent.top
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            margins: 10
        }
        Row {
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            spacing: 5
            Button {
                id: closeBtn
                bgColor: "transparent"
                bgColorSelected: "transparent"
                width: 36
                height: 36
                icon: App.res("images/close.png")
                visible: true
                onClicked: {
                    App.stop(img.source);
                    win.close();
                }
            }
            Button {
                id: minBtn
                bgColor: "transparent"
                bgColorSelected: "transparent"
                width: 36
                height: 36
                icon: App.res("images/min.png")
                onClicked: win.showMinimized()
            }
            Button {
                id: maxBtn
                checkable: true
                checked: false
                bgColor: "transparent"
                bgColorSelected: "transparent"
                width: 36
                height: 36
                icon: App.res("images/max.png")
                iconChecked: App.res("images/maxMin.png")
                visible: true
                onClicked: {
                    if (win.width>800) {
                        console.log("checked == true?:" + checked);
                        win.width = 800
                        win.height = 450
                        win.x = (Screen.desktopAvailableWidth-800)/2
                        win.y = (Screen.desktopAvailableHeight-450)/2
                        hideIfTimedout();
                    }else {
                        console.log("checked == flase?:",checked);
                        win.x = 70
                        win.y = 30
                        win.width = Screen.desktopAvailableWidth-140
                        win.height = Screen.desktopAvailableHeight-40
                    }
                }

//                onCheckedChanged: {
////                    console.log("check " + checked)
//                    if (checked) {
////                        console.log("min check " + checked)
//                        win.showNormal()
////                        win.setWidth(800)
////                        win.setHeight(450)
//                        hideIfTimedout()
//                    }
//                    else
////                        console.log("max check " + checked)
//                        win.showFullScreen()
////                        win.setX(60)
////                        win.setY(30)
////                        win.setWidth(1800)
////                        win.setHeight(1020)
//                }
            }
            Button {
                id: leftRotationBtn
                bgColor: "transparent"
                bgColorSelected: "transparent"
                width: 36
                height: 36
                icon: App.res("images/leftRotation.png")
                visible: true
                onClicked: {
                    img.rotation = ( img.rotation - 90.0 ) % 360
                }
            }
            Button {
                id: rightRotationBtn
                bgColor: "transparent"
                bgColorSelected: "transparent"
                width: 36
                height: 36
                icon: App.res("images/rightRotation.png")
                visible: true
                onClicked: {
                    img.rotation = ( img.rotation + 90.0 ) % 360
                }
            }
        }

        Row {
            anchors.left: parent.right
            anchors.verticalCenter: parent.verticalCenter
            spacing: 10
            anchors.margins: -50
            Button {
                id: sendBtn
                bgColor: "transparent"
                bgColorSelected: "transparent"
                x: 50
                width: 36
                height: 36
                icon: App.res("images/send.png")
                onClicked: {
                    App.send(img.source)
                    sendORStop = true
                    sendtimer.start()
                    sendBtn.visible = false;
                    progressRectangle.visible = true
                }
            }
            Button {
                id: sendStopBtn
                bgColor: "transparent"
                bgColorSelected: "transparent"
                x: 50
                width: 36
                height: 36
                icon: App.res("images/sendStop.png")
                onClicked: {
                    App.stop(img.source);
                    sendORStop = false
                    sendtimer.start()
                    sendStopBtn.visible = false;
                    progressRectangle.visible = true
                }
                visible: false;
            }
            Button{
                id: progressRectangle
                bgColor: "transparent"
                bgColorSelected: "transparent"
                width: 4
                height: 36
                icon: App.res("images/progressRectangle.png")
                visible:false
            }
            Timer{
                id: sendtimer
                interval: 100
                repeat: true
                onTriggered: {
                    timeFlag++
                    progressRectangle.width = progressRectangle.width + 1
                    if(progressRectangle.width >= 36){
                        progressRectangle.width = 4
                    }

                    if(timeFlag >= 30){

                        timeFlag = 0
                        progressRectangle.width = 4
                        sendtimer.stop()

                        progressRectangle.visible = false
                        if(sendORStop){
                           sendStopBtn.visible = true
                        }else{
                           sendBtn.visible = true
                        }
                    }
                }
            }
        }
    }
    Timer {
        id: timer
        interval: 3000
        onTriggered: {
            root.aniHide()
        }
    }
    function hideIfTimedout() {
        timer.start()
    }
    PropertyAnimation {
        id: anim
        target: root
        properties: "opacity"
        function reverse() {
            duration = 1500
            to = 0.2
            from = root.opacity
        }
        function reset() {
            duration = 200
            from = root.opacity
            to = 0.9
        }
    }
    function aniShow() {
        hiding = false
        anim.stop()
        anim.reset()
        anim.start()
    }
    function aniHide() {
        hiding = true
        anim.stop()
        anim.reverse()
        anim.start()
    }
    function toggleVisible() {
        // Only toggle at fullscreen
        if (!maxBtn.checked) 
            console.log("checked == ?:" + maxBtn.checked);
            return
        if (hiding)
            aniShow()
        else
            aniHide()
    }
}


大致就这些、、、

QML编写简单的图片查看器 QML编写简单的图片查看器。一个典型的Qml小例子,希望对初学qml朋友有所帮助。 立即下载

相关推荐

使用3dmax Morpher制作Unity表情动画

关于游戏人物的面部表情动画 方案一:如果面部骨骼数丰富的话,可以直接做骨骼动画 方案二:采用变形器(3dmax是Morpher,maya是blendshape)修改相应通道的权重值来做表情动画 本文简述方案二的做法。 说明:本文截图中3dsMax版本为2017。笔者第一次使用3dsMax,欢迎指正。 3dmax中导入人物模型,选择需要变形的对象,即head。当前对象附带skin信息。 ...

写作帮助思考 2万+

C++和QML混合编程_C++直接调用QML函数

C++和QML混合编程_C++直接调用QML函数

会选科技的博客 1008

加速度计解算姿态角

姿态角(欧拉角) 欧拉角主要用于描述刚体在固定三维参考坐标系下由于绕三轴任意旋转而形成的姿态角,具体描述参看欧拉角说明 图中xyz为固定参考系坐标,XYZ为刚体自有坐标系 (假定右手定则,即大拇指指向某一轴正方向,握拳是其余手指的转动方向为姿态角变化的正方向),则定义 绕固定坐标系的z轴旋转:航向角yaw, 转动 y 角度 绕固定坐标系的y轴旋转:俯仰角pitch,转动p 角度 绕固定坐标系的x轴旋转:横滚角roll, 转动r 角度 可以看出欧拉角或者姿态角是相对各个轴的角度偏移,再假定旋转的顺规为Z

卢平光的博客 1万+

QML 拖拽文件DropArea的使用

- QML - 拖拽文件DropArea的使用 代码简简单单就这么点 ApplicationWindow { title: qsTr("Hello World"); width: 640; height: 480; visible: true; Item{ anchors.fill: paren

lys211的专栏 4761

MC1496乘法器AM调制电路搭建全流程(附Multisim 14.0仿真文件)

本文提供了基于MC1496乘法器搭建AM调制电路的完整实战指南。针对仿真模型缺失的痛点,详细讲解了从晶体管级手动构建MC1496等效模型,到外围电路设计、调制度参数计算与调节,并在Multisim 14.0中进行仿真验证的全流程。通过深度剖析MC1496内部原理与AM信号调制机制,帮助读者获得从仿真到实践的可控设计与排错能力。

weixin_29190169的博客 593

使用kmplot在线进行生存分析

欢迎关注”生信修炼手册”!kmplot是一个生存分析的在线工具,最初是设计用来对肝癌中的miRNA进行生存分析,对应的文章发表在scientific reports上,链接如下https...

庐州月光的博客 1万+

qml之简单图片浏览器

前面或多或少我们学习了一些qml相关的简单的知识,今天我们就用前面学过的来做一个简单的图片浏览器。代码很简单,里面都有注释,希望对大家有所帮助。源代码:import QtQuick 2.10 import QtQuick.Window 2.10 import QtQuick.Controls.Styles 1.4 import QtQuick.Dialogs 1.2 import QtQuick.C

秋殇阁 1457

Eplan P8 API二次开发--插入符号(Symbol)功能(Function)并定义属性

1、目的 使用Eplan API在页中自动插入某个符号并按约定规则自动设置好属性 2. 步骤 一、基础信息 比如要在Eplan中自动插入一个电机的符号并定制属性,我们先要确定要插入的符号名,可以在Eplan中获取如下符号(Symbol)信息 可以知道我们待插入的符号名称为M3_1, 接下来,使用Visual Studio建立类库项目,并引用Eplan Api库 二、获取符号变量(SymbolVariant) 在Eplan中,当一个符号(Symbol)被插入到页中,这个符号的引用即变为一个(Function

如是道程序人生 4529

在Qt quick5.10-qml中使用drag and drop进行拖拽,及qml拖拽的Bug

在Qt5.10中qml实现的拖拽并不完善,以下Bug已在Qt5.12,Qt5.13中进行了修复。 在Qt Quick与 drag and drop 相关的几个QML Type: DropArea DropArea 是不可见的,它定义了一个可以接收拖放的区域。它的 entered 信号在有物体被拖入区域时发射,exited 信号在物体被拖出区域时发射,当物体在区域内被拖着来回移动时会不...

qq_36685813的博客 7655

量化交易 米筐 案例:市值因子选股策略

案例:市值因子的选股策略 1.结果 获得超额收益 年化 49% 2. 从股票中选择市值小的股票 选定财务数据筛选 进行每日调仓(多因子选股调仓 周期频率会小一些) 3. 代码 估值有关指标 # 在沪深300股票中,选出市值比较小的10只股票 # 在这个方法中编写任何的初始化逻辑。context对象将会在你的算法策略的任何方法之间做传递。 def init(context): # 沪深300组合 stocks = index_components('000300.XSHG') # 沪深3

廷益_飞鸟的博客 2313

大数据学习指南从入门到精通

利用框架的力量,看懂游戏规则,才是入行的前提大多数人不懂,不会,不做,才是你的机会,你得行动,不能畏首畏尾选择才是拉差距关键,风向,比你流的汗水重要一万倍,逆风划船要累死人的为什么选择学习大数据开发,不选择Java开发?借棋弈做比喻,智商高的不要选择五子琪,要选择围棋,它能长久地吸引你。不都是在棋盘上一颗黑子一颗白子地下吗?因为围棋更复杂,能够掌握如此复杂的技艺、产生稳定输出的棋手、让我们更佩服。选择学习大数据开发也如此,能让你的职业生涯走得更远,少走弯路。

Lansonli(蓝深李)的博客 2万+

Qml进度条

基本上是官网例子上加了一些方法ProgressBar { property color proColor: "#148014" property color proBackgroundColor: "#AAAAAA" property int proWidth: 2 property real progress: 0 property real proRadi

zhengtianzuo的博客 1905

k8s篇之underlay网络和overlay区别

underlay和overlay

小橙子的笔记屋 2143

【QT】QML的Mouse事件(MouseArea)详解

在UI应用程序中,我们常常要处理鼠标事件,一个MouseArea就可以搞定许多事情。MouseArea本身是不可见的,主要和一些可见的元素一起使用,先来看一下它有哪些属性: acceptedButtons:Qt::MouseButtons枚举类型,默认为Qt.leftButton,用来设置有效的鼠标按键,支持按位与“|”操作符,具体按键类型可参考—— http://doc.qt.io/

Making Life Better. Making Others Better. 1万+

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

string.h安全函数学习之strcpy_s,strcat_s,strerror_s,strtok_s,strncpy_s,strncat_s,memcpy_s,memmove_s

我们知道在字符串函数中,strcpy,strcat,strerror,strtok,strncpy,strncat,strlen存在字符串溢出的问题,从而引发安全性问题,本篇介绍相当的安全替代函数。strcpy_s,strcat_s,strerror_s,strtok_s,strncpy_s,strncat_s,memcpy_s,memmove_s下面看具体的示例

chenyijun的专栏 3840

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

QML编程 基础 小白

QT += quick //添加quick模块 QQuickView //视图 用来链接QML和程序 0 QQuickView viewer;//Quick视图 viewer.setSource(QUrl(QLatin1String("qrc:///qml/qmlvideofx/Main.qml")));//加载视图QML文件 viewer.setResizeMode(QQuickView::SizeRootObjectToView);//视图将自动将根项调整为视图的大小 viewer

qq_45743563的博客 1008

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

C++与QML交互基础

#include #include #include #include #include #include #include #include #include int main(int argc, char *argv[]) { QApplication a(argc, argv); QWidget qwidget ; qwidget.setWindowTitle(

nanguazhuo的专栏 1872

qml 函数使用经验总结1(image中调用函数)

Text { id: imgSource text: translation.qsTr(type) visible: false } Rectangle{//左上角的文件类型图标 width: 16...

sono_io的博客 505

QML之图片动态显示(Image与QQuickImageProvider)

最近,需要在QML上显示来自OPenCV的摄像头视频,因为是视频,即好多好多图片,所以需要QML上动态刷新来自C++的QImage。具体怎么搞我就不再赘述,虽然资料不多,但是优快云上的一篇博客已经写得十分的清楚。该博客如下: 前言 开发Qt应用时,想把QImage发送到QML端通过Image组件显示出来,这种场景主要用在例如在C++端调用android系统接口截图然后发送到QML端显示,或者C...

草上爬的博客 1万+

QML类型说明-DropArea

DropArea ImportStatement:   import QtQuick 2.2   Properties containsDrag: bool drag drag.x :qreal drag.y :qreal drag.source: Object keys :stringlist   Signals dropped(DragEventdrop) enter

杞櫹椅桐的专栏 2712
上一篇: vs2013创建项目时没有Windows install XML 解决方案
下一篇: git闪退
hAsagEi丶
博客等级 码龄11年 0粉丝 10原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值