Qt Quick 事件處理之捏拉縮放與旋轉
上一篇《Qt Quick事件處理之滑鼠、鍵盤、定時器》我們介紹了常見的滑鼠、鍵盤、定時器的處理,滑鼠、鍵盤都是電腦上我們最常使用的事件,這節我們來介紹 Android 智慧手機上的一個非常重要的手勢:捏拉手勢。捏拉手勢最早在蘋果手機上得到應用,蘋果還曾經嘗試為此操作申請專利,藉以鉗制三星在美國的手機和平板銷售。這些我們且不管它,咱們只說在 Qt Quick 中如何處理捏拉手勢。
Qt Quick 中的 PinchArea 帶來捏拉手勢,看名字是不是和 MouseArea 類似?木錯,就是醬紫。先來看 PinchArea 都有哪些屬性和訊號,瞭解了這些才能使用它。
PinchArea簡介
PinchArea 本身是一個不可見的 Item ,通常和一個可見的 Item 配合使用來處理捏拉手勢。比如和一個 Rectangle 一塊使用,或者和 Image 一塊使用實現圖片縮放、旋轉等效果。捏拉手勢識別實際上是通過對若干觸控事件的處理來實現的。
屬性
PinchArea 是 Item 的派生類,除了繼承自 Item 的屬性外,還有兩個專屬屬性: enabled 和 pinch 。
enabled 屬性預設值為 true ,如果你設定為 false ,那麼 PinchArea 就嘛事兒不幹,捏拉區域對滑鼠、觸控事件就變透明瞭。
pinch 屬性知名與捏拉手勢的詳情,它是一個組合屬性,包括 target 、 active 、 minimumScale 、 maximumScale 、 minimumRotation 、 maximumRotation 、 dragAxis 、 minimumX 、 maximumX 、 minimumY 、 maximumY 等屬性。
target 指明捏拉手勢要操作的 Item , active (bool型別)屬性表示目標 Item 是否正在被拖動。
minimumScale / maximumScale 設定最小、最大縮放係數。 minimuxRotation / maximumRotation 設定對小、最大旋轉角度。這四個屬性都是 real 型別。
dragAxis 設定沿 X 軸(Pinch.XAxis) 、 Y 軸(Pinch.YAxis) 還是 XY (Pinch.XAndYAxis)兩個軸拖動,你也可以禁止拖動,只要給 dragAxis 賦值 Pinch.NoDrag 即可。當 dragAxis 允許拖動時,minimumX / maximumX 設定 X 軸的最小、最大拖動位置, minimumY / maximumY 設定 Y 軸的最小、最大拖動位置。
訊號
PinchArea 有三個訊號:onPinchStarted() 、 onPinchUpdated() 、 onPinchFinished() 。它們都有一個名為 pinch 的引數,型別是 PinchEvent 。為了有效響應這些訊號,必須瞭解 PinchEvent 型別,我們先介紹它。
PinchEvent 具有下列屬性:
- accepted ,在 onPinchStarted() 訊號處理器中設定為 true 表明你要響應 PinchEvent ,Qt 會持續發給你更新事件;設定為 false ,Qt 就不會再發 PinchEvent 事件給你了。
- angle ,表示最近兩個觸點之間的角度, previousAngle 是上一次事件的角度, rotation 是從捏拉手勢開始到當前事件的總的旋轉角度。
- scale ,表示最近兩個觸點之間的縮放係數, previousScale 是上一次事件的縮放係數。
- center ,兩個觸點的中心點, previousCenter 是上一次事件的中心點, startCenter 是事件開始時的中心點。
- point1 , point2 儲存當前觸點的位置, startPoint1 , startPoint2 儲存第二個觸點按下時兩個觸點的位置。
- pointCount 儲存到現在為止的觸點總數。
onPinchStarted() 訊號在第一次識別到捏拉手勢時發出,如果你要處理它,那就要將其設定為 true 。然後就可以通過 pinch 引數來設定要變換的 Item 了。
當你在 onPinchStarted() 的訊號處理器中接受了 TouchEvent 事件,那麼 Qt 就會不斷的傳送新事件給你, onPinchUpdated() 訊號就會不斷的發射,你可以在它的訊號處理器中通過 pinch 引數,擷取你需要的值來更新你的 Item 。
onPinchFinished() 訊號在使用者手指離開螢幕時觸發。
怎樣使用
介紹了 PinchArea 和 PinchEvent ,是時候看看怎麼使用它們了。
要想使用 PinchArea 來變換一個 Item ,有兩個辦法:
- 設定 target 屬性,將其指向要變換的 Item ,然後 PinchArea 就會在合適的時候幫你變換它。
- 處理 onPinchStarted() / onPinchUpdated() / onPinchFinished() 訊號,在訊號處理器中變換目標 Item 。這種方式更靈活,你甚至可以同時處理多個 Item 。
選定一種方式後,你可能還要配置 PinchArea.pinch 屬性,給不同的引數設定合理的值,比方說最大可以放大到多少倍。
縮放與旋轉例項
這裡提供一個簡單的使用 PinchArea 的例項,我們用 PinchArea 來旋轉和縮放一個矩形。
使用 pinch.target
我們先用第一種方式,指定 pinch.target 。直接看 main.qml 文件吧:
import QtQuick 2.0
Rectangle {
width: 360;
height: 360;
focus: true;
Rectangle {
width: 100;
height: 100;
color: "blue";
id: transformRect;
anchors.centerIn: parent;
}
PinchArea {
anchors.fill: parent
pinch.maximumScale: 20;
pinch.minimumScale: 0.2;
pinch.minimumRotation: 0;
pinch.maximumRotation: 90;
pinch.target: transformRect;
}
}
程式碼很簡單,初始化了最小、最大縮放係數,最小、最大旋轉角度,然後將 pinch.target 指向 id 為 transformRect 的藍色矩形。於是,一切都正常運轉,兩指捏拉之間,縮放與旋轉效果就出來了。
圖 1 是在 Android 手機上執行的起始效果:
圖 1 pinchArea 示例啟動效果
圖 2 是我兩個指頭捏拉 了幾下後的效果:
圖 2 pinchArea 縮放與旋轉效果
使用 pinch.target 這種方式,你什麼都不用關心,甚至不需要弄明白 pinch 屬性到底是什麼含義,就可以得到一個不錯的變換效果, Qt Quick 預設幫你處理所有的事情。
下面看看使用訊號的方式。
使用訊號
使用 onPinchStarted() / onPinchUpdated() / onPinchFinished() 要稍微麻煩一些,你必須要了解 PinchEvent 每個引數的含義,自己設計變換策略。不過好處是,七十二般變化都由你控制。
直接看新的 main.qml 文件:
import QtQuick 2.0
Rectangle {
width: 360;
height: 360;
focus: true;
Rectangle {
width: 100;
height: 100;
color: "blue";
id: transformRect;
anchors.centerIn: parent;
}
PinchArea {
anchors.fill: parent
pinch.maximumScale: 20;
pinch.minimumScale: 0.2;
pinch.minimumRotation: 0;
pinch.maximumRotation: 90;
onPinchStarted: {
pinch.accepted = true;
}
onPinchUpdated: {
transformRect.scale *= pinch.scale;
transformRect.rotation += pinch.rotation;
}
onPinchFinished: {
transformRect.scale *= pinch.scale;
transformRect.rotation += pinch.rotation;
}
}
}
程式碼大部分都和 pinch.target 方式一樣,只是去掉了 "pinch.target: transformRect" 語句,改用訊號處理器。程式碼很直接,不再解釋了。
OK,這篇到此結束。
回顧一下:
相關推薦
Qt Quick 事件處理之捏拉縮放與旋轉
上一篇《Qt Quick事件處理之滑鼠、鍵盤、定時器》我們介紹了常見的滑鼠、鍵盤、定時器的處理,滑鼠、鍵盤都是電腦上我們最常使用的事件,這節我們來介紹 Android 智慧手機上的一個非常重要的
Qt Quick 事件處理之訊號與槽
前面兩篇文章《QML 語言基礎》和《Qt Quick 簡單教程》中我們介紹了 QML 語言的基本語法和 Qt Quick 的常見元素,親們,通過這兩篇文章,您應該已經可以完成簡單的 Qt Quick 應用了。接下來呢,哈,我們要介紹 Qt Quick 中一個灰常灰常重
[轉]opencv3 圖像處理 之 圖像縮放( python與c++實現 )
space original 註意 libs 波紋 輸出 uil iostream 3.5 轉自:https://www.cnblogs.com/dyufei/p/8205121.html 一. 主要函數介紹 1) 圖像大小變換 cvResize () 原型: void
java處理圖片--圖片的縮放,旋轉和馬賽克化
add 大小 count fun ref translate markdown 文件 new 這是我自己結合網上的一些資料封裝的java圖片處理類,支持圖片的縮放,旋轉,馬賽克化。(轉載請註明出處:http://blog.csdn.net/u012116
學習OPENSEADRAGON之二 (介面縮放與平移規則設定)
OpenSeadragon入門瞭解請看第一篇:http://www.cnblogs.com/yingjiehit/p/4362377.html OpenSeadragon給我們提供了很多的可選介面元素,這些介面元素可以通過簡單的配置很容易的能使用了。 此外,OpenSeadragon旨在讓你
【python影象處理】影象的縮放、旋轉與翻轉
影象的幾何變換,如縮放、旋轉和翻轉等,在影象處理中扮演著重要的角色,python中的Image類分別提供了這些操作的介面函式,下面進行逐一介紹。 1、影象的縮放 影象的縮放使用resize()成員函
【安卓UI】ImageView圖片縮放與旋轉實現整理
1、圖片縮放 按照原圖片寬高比縮放圖片寬高即可。 方法1:重新設定view寬高屬性 //原圖:width/height = 3/2 var newWidth = 300 var dw = n
Qt Quick 影象處理例項之美圖秀秀 附原始碼下載
在《Qt Quick 之 QML 與 C++ 混合程式設計詳解》一文中我們講解了 QML 與 C++ 混合程式設計的方方面面的內容,這次我們通過一個影象處理應用,再來看一下 QML 與 C++ 混合程式設計的威力,同時也為諸君揭開美圖秀秀、魔拍之類的相片美化應用的底層原
事件處理之事件傳播
傳播 python 事件傳播 事件 事件處理 5% 處理 pytho 6%E5%BE%AE%E4%BF%A1%E6%AC%A1%E5%BC%80%E5%8F%91%E4%B9%8B%E5%BE%AE%E4%BF%A1%E6%96%87%E6%9C%AC%E6%B6%88%E6%
影象處理之影象基本變化(平移、縮放、旋轉)(Octave實現)
在模式識別及計算機視覺中,要經常進行影象的變化。 例如:在識別手寫數字中,我們可能在廣泛應用中要求所有的圖片都是20*20這麼好的規格。所以,我們就需要進行縮放來達到目的。 今天來總結下學到的影象的基本變換。 首先我們計 (w,v) (w,v)為源影象的
控制元件巢狀中的QT滑鼠事件處理機制
想實現在層層佈局的控制元件中,對最外層的QLabel上的滑鼠事件實現tracking,即觸發mouseMoveEvent的時候,不需要一直按著 前提:自定義控制元件,繼承QLabel重寫滑鼠事件相應的方法 可參考:https://wiki.qt.io/Clickable_QLabel
accept()函式用來告訴Qt,事件處理函式“接收”了這個事件,不要再傳遞;ignore()函式則告訴Qt,事件處理函式“忽略”了這個事件,需要繼續傳遞(看一下QWidget::mousePressEvent的實現,最為典型。如果希望忽略事件,只要呼叫父類的響應函式即可)
QEvent的accept()和ignore()一般不會用到,因為不如直接呼叫QWidget類的事件處理函式直接,而且作用是一樣的,見下面的例子。 推薦直接呼叫QWidget的事件處理函式。而不是呼叫accept()和ignore()。 只有一種情況下,必須使用呼叫accept()和ign
Qt Quick綜合例項之檔案檢視器
如果你基於Qt SDK 5.3.1來建立一個Qt Quick App專案,專案模板為你準備的main.qml文件的根元素是ApplicationWindow或Window。這次我們就以ApplicationWindow為例,圍繞著它實現一個綜合例項:檔案檢視器。通過檔案
quick-cocos2dx之特效按鈕——縮放按鈕
cc.ui.UIPushButton.new("Button01.png", {scale9 = true}) :setButtonSize(200, 80) :setB
淺議Qt的事件處理機制 一
深入瞭解事件處理系統對於每個學習Qt人來說非常重要,可以說,Qt是以事件驅動的UI工具集。 大家熟知Signals/Slots在多執行緒的實現也依賴於Qt的事件處理機制。 在Qt中,事件被封裝成一個個物件,所有的事件均繼承自抽象類QEvent. 接下來
【計算機視覺】【影象處理】幾何變換之仿射變換(平移、縮放、旋轉)
1.概念詞語1)影象的幾何變換 對影象進行放大、縮小、旋轉等操作,會改變原圖中各區域的空間關係,這類操作就是影象的幾何變換。2)仿射變換 對原來的x和y座標分別進行線性的幾何變換,得到新的x和y,這種變換就是放射變換。3)投影變換4)極座標變換5)齊次座標
事件處理之二:點選事件監聽器的五種寫法
首選方法二! 方法一:寫一個內部類,在類中實現點選事件 1、在父類中呼叫點選事件 bt_dail.setOnClickListener(new MyButtonListener()); 2、建立內部類 private class MyButtonListener
Qt的事件處理和定時器解析(例項解析)
理論準備: 1、事件是由視窗系統或者Qt自身產生的,用以響應所發生的各類事情。 2、Qt事件的產生可能是因為鍵盤或滑鼠被按下,也有可能是視窗在顯示時,產生的繪製事件。 3、大多數事件都是為使用者的操作而產生的響應。其中比較特殊的定時器事件,則是由系統獨立產生的。 4、在Q
QT中給各控件增加背景圖片(可縮放可旋轉)的幾種方法
.net detail eight iou rotate art board 按鈕 previous 1. 給QPushButton 增加背景圖片:背景圖片可根據Button大小自由縮放。 [cpp] view plain copy vo
(三)高德地圖之自定義縮放及縮放動畫效果
這一節主要實現的功能是地圖的自定義縮放及縮放的動畫效果,還是直接放上程式碼更直觀些,主要部位裡面基本有註解 還是老樣子,首先是新建activity_zoom_animate.xml佈局檔案 <?xml version="1.0" encoding="utf-8"?> <