[英]How to rotate a qml rectangle by dragging?
我正在創建一個時鍾計時器,通過拖動時鍾指針(使用觸摸輸入或鼠標)設置時間。 為此,我定義了一個AnalogClockHand元素,如下所示,
AnalogClockHand.qml
Rectangle {
id: hand
property alias rotationAngle: handRotation.angle
x: (parent.width / 2) - (width / 2); y: (parent.height / 2) - height; z: 2
width: units.gu(1); height: units.gu(14);
radius: units.gu(1)
color: Constants.coolGrey
antialiasing: true
transform: Rotation {
id: handRotation
origin { x: hand.width / 2; y: hand.height }
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.3; modulus: 360 }
}
}
}
在主qml文件中,我使用了這個元素並向其添加了一個mouseArea,如下所示,
主Qml文件
AnalogClockHand {
id: secondHand
z: parent.z - 1;
height: units.gu(17); width: units.gu(0.5)
rotationAngle: seconds * 6;
antialiasing: true;
// Implements touch support
MouseArea {
id: timerbackmousearea
property real truex: mouseX - parent.width/2
property real truey: parent.height/2 - mouseY
property real angle: Math.atan2(truex, truey)
property real strictangle: parseInt(angle * 180 / Math.PI)
property real modulo: strictangle % 6
anchors.fill: parent
preventStealing: true
onPositionChanged: if (timerbackmousearea.angle < 0) {
secondHand.rotationAngle = strictangle - modulo + 360;
timerValue = parseInt(secondHand.rotationAngle/6);
seconds = timerValue;
}
else {
secondHand.rotationAngle = strictangle - modulo + 6;
timerValue = parseInt(secondHand.rotationAngle/6);
seconds = timerValue;
}
}
}
然而,這種邏輯不能正常工作並且非常不穩定。 因此,人們無法順利地設定時間。 在一天結束時,我正在嘗試實現如下圖所示的內容。 用戶應該能夠移動小時,分鍾或秒針來設置時間。
是否有更好的代碼邏輯可以實現?
注1:我確實認識到秒針在圖像中非常小,但應該盡快修復。
我會這樣做(我做了一個更簡單的代碼,因為我沒有Ubuntu Touch組件),但旋轉邏輯在這里和第二次轉換的角度:
import QtQuick 2.0
Rectangle{
id: root;
width: 720;
height: 480;
color: "black";
Item {
id: container;
width: 250;
height: width;
anchors.centerIn: parent;
property real centerX : (width / 2);
property real centerY : (height / 2);
Rectangle{
id: rect;
color: "white";
transformOrigin: Item.Center;
radius: (width / 2);
antialiasing: true;
anchors.fill: parent;
Rectangle {
id: handle;
color: "red";
width: 50;
height: width;
radius: (width / 2);
antialiasing: true;
anchors {
top: parent.top;
margins: 10;
horizontalCenter: parent.horizontalCenter;
}
MouseArea{
anchors.fill: parent;
onPositionChanged: {
var point = mapToItem (container, mouse.x, mouse.y);
var diffX = (point.x - container.centerX);
var diffY = -1 * (point.y - container.centerY);
var rad = Math.atan (diffY / diffX);
var deg = (rad * 180 / Math.PI);
if (diffX > 0 && diffY > 0) {
rect.rotation = 90 - Math.abs (deg);
}
else if (diffX > 0 && diffY < 0) {
rect.rotation = 90 + Math.abs (deg);
}
else if (diffX < 0 && diffY > 0) {
rect.rotation = 270 + Math.abs (deg);
}
else if (diffX < 0 && diffY < 0) {
rect.rotation = 270 - Math.abs (deg);
}
}
}
}
}
Text {
text: "%1 secs".arg (Math.round (rect.rotation / 6));
font {
pixelSize: 20;
bold: true;
}
anchors.centerIn: parent;
}
}
}
工作良好 !
以上示例的輸出
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.