Qt+Quick實(shí)現(xiàn)圖片演示器的開發(fā)
介紹
一個(gè)適用于觸摸設(shè)備的QML應(yīng)用程序，它使用一個(gè)帶有FolderListModel的Repeater來訪問文件夾中的內(nèi)容，以及一個(gè)包含MouseArea的PinchArea來處理獲取內(nèi)容上的捏合手勢。
Photo Surface
演示了如何使用帶有FolderListModel和FileDialog的Repeater來訪問用戶選擇的文件夾中的圖像，以及如何使用包含MouseArea的PinchArea處理同一項(xiàng)目內(nèi)的拖動(dòng)，旋轉(zhuǎn)和收縮縮放。
所有應(yīng)用程序代碼都包含在一個(gè)QML文件photosurface.qml中。內(nèi)聯(lián)JavaScript代碼用于在照片表面上放置，旋轉(zhuǎn)和縮放圖像。
運(yùn)行示例
要從Qt Creator運(yùn)行示例，請(qǐng)打開“歡迎”模式，然后從“示例”中選擇示例。
創(chuàng)建主窗口
要為Photo Surface應(yīng)用創(chuàng)建主窗口，我們使用Window QML類型作為根項(xiàng)目。它會(huì)自動(dòng)設(shè)置與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類型，我們必須導(dǎo)入：
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類型，我們必須導(dǎo)入：
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類型，我們必須導(dǎo)入Qt快速對(duì)話框：
import QtQuick.Dialogs 1.0
fileDialog.open()當(dāng)應(yīng)用啟動(dòng)時(shí)，我們使用該功能打開文件對(duì)話框：
Component.onCompleted: fileDialog.open()
用戶還可以單擊文件對(duì)話框圖標(biāo)以打開文件對(duì)話框。我們使用Image QML類型來顯示圖標(biāo)。在Image類型內(nèi)部，我們使用帶有信號(hào)處理程序的MouseAreaonClicked來調(diào)用該fileDialog.open()函數(shù)：
在照片表面上顯示圖像
我們使用Rectangle作為Repeater的委托，為FolderListModel在選定文件夾中找到的每個(gè)圖像提供框架。我們使用JavaScriptMath()方法將框架隨機(jī)放置在照片表面上，并以任意角度旋轉(zhuǎn)它們，以及縮放圖像：
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()
}處理捏合手勢
我們在相框中使用一個(gè)包含MouseArea的PinchArea來處理相框的拖動(dòng)、旋轉(zhuǎn)和捏合縮放。
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屬性來控制相框?qū)δ蠛鲜謩莸姆磻?yīng)。該pinch.target組photoFrame的項(xiàng)目來操作。旋轉(zhuǎn)屬性指定可以在所有角度旋轉(zhuǎn)框架，而縮放屬性指定可以在0.1和之間縮放它們10。
在MouseArea的onPressed信號(hào)處理程序中，我們通過增加其z屬性的值來將所選相框提升到頂部。根項(xiàng)存儲(chǔ)最上面一幀的z值。在onEntered信號(hào)處理程序中控制相框的邊框顏色以突出顯示所選圖像：
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信號(hào)處理程序通過使用鼠標(biāo)來模擬捏手勢：
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信號(hào)處理程序在響應(yīng)鼠標(biāo)滾輪手勢時(shí)被調(diào)用。使用垂直滾輪來縮放和Ctrl鍵以及垂直滾輪來旋轉(zhuǎn)幀。如果鼠標(biāo)有一個(gè)水平滾輪，則使用它來旋轉(zhuǎn)幀。
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相關(guān)組件：
- QtitanRibbon: 遵循Microsoft Ribbon UI Paradigm for Qt技術(shù)的Ribbon UI組件，致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
- QtitanChart :是一個(gè)C ++庫，代表一組控件，這些控件使您可以快速地為應(yīng)用程序提供漂亮而豐富的圖表。并且支持所有主要的桌面操作系統(tǒng)。
- QtitanDataGrid :這個(gè)Qt數(shù)據(jù)網(wǎng)格組件使用純C++創(chuàng)建，運(yùn)行速度極快，處理大數(shù)據(jù)和超大數(shù)據(jù)集的效果突出。QtitanDataGrid完全集成了QtDesigner，因而極易適應(yīng)其他相似的開發(fā)環(huán)境，保證100%兼容Qt GUI。
到此這篇關(guān)于Qt+Quick實(shí)現(xiàn)圖片演示器的開發(fā)的文章就介紹到這了,更多相關(guān)Qt Quick圖片演示器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于怎么在C++二進(jìn)制文件中注入git信息的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
Java C++ 算法題解leetcode1608特殊數(shù)組特征值
這篇文章主要為大家介紹了Java C++ 算法題解拓展leetcode1608特殊數(shù)組特征值實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
用c++語言實(shí)現(xiàn)一個(gè)簡單的計(jì)算器，新手作品，僅僅包括基本的加減乘除運(yùn)算。希望能夠給菜鳥們一些啟發(fā)2016-05-05
這篇文章主要介紹了C語言中qsort函數(shù)的用法實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
C++右值引用與移動(dòng)構(gòu)造函數(shù)基礎(chǔ)與應(yīng)用詳解
左值和右值都是針對(duì)表達(dá)式,左值是指表達(dá)式結(jié)束后依然存在的持久對(duì)象,右值是指表達(dá)式結(jié)束時(shí)就不再存在的臨時(shí)對(duì)象,下面這篇文章主要給大家介紹了關(guān)于C++11右值引用和移動(dòng)語義的相關(guān)資料,需要的朋友可以參考下2023-02-02
從語言標(biāo)準(zhǔn)來說，c++里沒有什么菱形運(yùn)算符，c++20里雖然新增了一個(gè)運(yùn)算符operator<=>，但這個(gè)和所謂的菱形運(yùn)算符沒有任何關(guān)系，下面通過本文探討C++里也有菱形運(yùn)算符嗎這一問題探討，感興趣的朋友跟隨小編一起看看吧2024-04-04
純c實(shí)現(xiàn)異常捕獲try-catch組件教程示例
這篇文章主要為大家介紹了純c實(shí)現(xiàn)異常捕獲try-catch組件教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了C++交換指針實(shí)例,針對(duì)C與C++交換指針的方法進(jìn)行了較為詳細(xì)的對(duì)比分析,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10
指針是一個(gè)實(shí)體，引用是一個(gè)別名；在匯編上，引用的底層是以指針的方式實(shí)現(xiàn)的，定義一個(gè)引用變量，相當(dāng)于定義了一個(gè)指針，然后把引用內(nèi)存的地址寫到這個(gè)指針里面，當(dāng)通過引用變量修改它所引用的內(nèi)存時(shí)，它先訪問了指針里面的地址，然后在這個(gè)地址的內(nèi)存里面對(duì)值進(jìn)行修改2022-05-05
6個(gè)變態(tài)的C語言Hello World程序
這篇文章主要介紹了6個(gè)變態(tài)的C語言Hello World程序,需要的朋友可以參考下2016-05-05