Qt+Quick實現(xiàn)圖片演示器的開發(fā)

更新時間：2023年01月04日 09:10:14 作者：音視頻開發(fā)老舅

這篇文章主要為大家詳細介紹了Qt如何利用Quick實現(xiàn)圖片演示器的開發(fā)，文中的示例代碼講解詳細，對我們學習Qt有一定的幫助，需要的可以參考一下

介紹

一個適用于觸摸設備的QML應用程序，它使用一個帶有FolderListModel的Repeater來訪問文件夾中的內(nèi)容，以及一個包含MouseArea的PinchArea來處理獲取內(nèi)容上的捏合手勢。

Photo Surface

演示了如何使用帶有FolderListModel和FileDialog的Repeater來訪問用戶選擇的文件夾中的圖像，以及如何使用包含MouseArea的PinchArea處理同一項目內(nèi)的拖動，旋轉和收縮縮放。

所有應用程序代碼都包含在一個QML文件photosurface.qml中。內(nèi)聯(lián)JavaScript代碼用于在照片表面上放置，旋轉和縮放圖像。

運行示例

要從Qt Creator運行示例，請打開“歡迎”模式，然后從“示例”中選擇示例。

創(chuàng)建主窗口

要為Photo Surface應用創(chuàng)建主窗口，我們使用Window QML類型作為根項目。它會自動設置與Qt Quick圖形類型一起使用的窗口：

Window {
    id: root
    visible: true
    width: 1024; height: 600
    color: "black"
    property int highestZ: 0
    property real defaultSize: 200
    property var currentFrame: undefined

要使用Window類型，我們必須導入：

import QtQuick.Window 2.1

訪問文件夾內(nèi)容

我們將Repeater QML類型與FolderListModel一起使用，以顯示位于文件夾中的GIF，JPG和PNG圖像：

        Repeater {
            model: FolderListModel {
                id: folderModel
                objectName: "folderModel"
                showDirs: false
                nameFilters: imageNameFilters
            }

要使用FolderListModel類型，我們必須導入：

import Qt.labs.folderlistmodel 1.0

我們使用FileDialog使用戶能夠選擇包含圖像的文件夾：

    FileDialog {
        id: fileDialog
        title: "Choose a folder with some images"
        selectFolder: true
        folder: picturesLocation
        onAccepted: folderModel.folder = fileUrl + "/"
    }

要使用FileDialog類型，我們必須導入Qt快速對話框：

import QtQuick.Dialogs 1.0

fileDialog.open()當應用啟動時，我們使用該功能打開文件對話框：

Component.onCompleted: fileDialog.open()

用戶還可以單擊文件對話框圖標以打開文件對話框。我們使用Image QML類型來顯示圖標。在Image類型內(nèi)部，我們使用帶有信號處理程序的MouseAreaonClicked來調(diào)用該fileDialog.open()函數(shù)：

在照片表面上顯示圖像

我們使用Rectangle作為Repeater的委托，為FolderListModel在選定文件夾中找到的每個圖像提供框架。我們使用JavaScriptMath()方法將框架隨機放置在照片表面上，并以任意角度旋轉它們，以及縮放圖像：

  Image {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 10
        source: "resources/folder.png"
        MouseArea {
            anchors.fill: parent
            anchors.margins: -10
            onClicked: fileDialog.open()
            hoverEnabled: true
            onPositionChanged: {
                tooltip.visible = false
                hoverTimer.start()
            }
            onExited: {
                tooltip.visible = false
                hoverTimer.stop()
            }

處理捏合手勢

我們在相框中使用一個包含MouseArea的PinchArea來處理相框的拖動、旋轉和捏合縮放。

  Rectangle {
                id: photoFrame
                width: image.width * (1 + 0.10 * image.height / image.width)
                height: image.height * 1.10
                scale: defaultSize / Math.max(image.sourceSize.width, image.sourceSize.height)
                Behavior on scale { NumberAnimation { duration: 200 } }
                Behavior on x { NumberAnimation { duration: 200 } }
                Behavior on y { NumberAnimation { duration: 200 } }
                border.color: "black"
                border.width: 2
                smooth: true
                antialiasing: true
                Component.onCompleted: {
                    x = Math.random() * root.width - width / 2
                    y = Math.random() * root.height - height / 2
                    rotation = Math.random() * 13 - 6
                }

我們使用pinchgroup屬性來控制相框對捏合手勢的反應。該pinch.target組photoFrame的項目來操作。旋轉屬性指定可以在所有角度旋轉框架，而縮放屬性指定可以在0.1和之間縮放它們10。

在MouseArea的onPressed信號處理程序中，我們通過增加其z屬性的值來將所選相框提升到頂部。根項存儲最上面一幀的z值。在onEntered信號處理程序中控制相框的邊框顏色以突出顯示所選圖像：

  PinchArea {
                    anchors.fill: parent
                    pinch.target: photoFrame
                    pinch.minimumRotation: -360
                    pinch.maximumRotation: 360
                    pinch.minimumScale: 0.1
                    pinch.maximumScale: 10
                    pinch.dragAxis: Pinch.XAndYAxis
                    onPinchStarted: setFrameColor();

為了使您能夠在桌面上測試示例，我們使用MouseArea的onWheel信號處理程序通過使用鼠標來模擬捏手勢：

          MouseArea {
                        id: dragArea
                        hoverEnabled: true
                        anchors.fill: parent
                        drag.target: photoFrame
                        scrollGestureEnabled: false  // 2-finger-flick gesture should pass through to the Flickable
                        onPressed: {
                            photoFrame.z = ++root.highestZ;
                            parent.setFrameColor();
                        }
                        onEntered: parent.setFrameColor();

onWheel信號處理程序在響應鼠標滾輪手勢時被調(diào)用。使用垂直滾輪來縮放和Ctrl鍵以及垂直滾輪來旋轉幀。如果鼠標有一個水平滾輪，則使用它來旋轉幀。

 onWheel: {
                            if (wheel.modifiers & Qt.ControlModifier) {
                                photoFrame.rotation += wheel.angleDelta.y / 120 * 5;
                                if (Math.abs(photoFrame.rotation) < 4)
                                    photoFrame.rotation = 0;
                            } else {
                                photoFrame.rotation += wheel.angleDelta.x / 120;
                                if (Math.abs(photoFrame.rotation) < 0.6)
                                    photoFrame.rotation = 0;
                                var scaleBefore = photoFrame.scale;
                                photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10;
                            }
                        }

Qt相關組件：

QtitanRibbon: 遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
QtitanChart :是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。并且支持所有主要的桌面操作系統(tǒng)。
QtitanDataGrid :這個Qt數(shù)據(jù)網(wǎng)格組件使用純C++創(chuàng)建，運行速度極快，處理大數(shù)據(jù)和超大數(shù)據(jù)集的效果突出。QtitanDataGrid完全集成了QtDesigner，因而極易適應其他相似的開發(fā)環(huán)境，保證100%兼容Qt GUI。

到此這篇關于Qt+Quick實現(xiàn)圖片演示器的開發(fā)的文章就介紹到這了,更多相關Qt Quick圖片演示器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: