如何通過拖動來旋轉qml矩形？

Question

我正在創建一個時鐘計時器，可以通過拖動時鐘手來設置時間（使用觸摸輸入或鼠標）。爲了這個目的，我已經定義了一個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文件，我用這個元件和鼠標區域添加到它如以下所示，

主文件設爲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：我意識到圖像中的秒針非常小，但是應該儘快修復。

Answer 1

我會做這樣的（我沒有，因爲我沒有Ubuntu的觸控組件更簡單的代碼），但旋轉邏輯是在這裏和角度來第二次轉換太：

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; 
     } 
    } 
} 

工作正常！