Wie ein qml Rechteck durch Ziehen drehen?

Question

Ich erstelle eine Zeitschaltuhr, wo die Zeit durch Ziehen des Uhrzeigers eingestellt werden kann (per Touch-Eingabe oder Maus). Zu diesem Zweck ich ein AnalogClockHand Element definiert haben, wie unten,

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

Im Haupt qml Datei

gezeigt, benutzte ich dieses Element und eine mouseArea, um es hinzuzufügen, wie unten gezeigt,

Haupt QML Datei

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

Diese Logik ist funktioniert jedoch nicht richtig und ist sehr flockig. Also kann man die Zeit nicht so flüssig einstellen. Am Ende des Tages, ich versuche, etwas zu implementieren, wie im Bild unten gezeigt. Der Benutzer sollte in der Lage sein, den Stunden-, Minuten- oder Sekundenzeiger zu bewegen, um die Zeit einzustellen.

Gibt es eine bessere Code-Logik, die ich implementieren könnte?

Anmerkung 1: ich erkennen, dass der Sekundenzeiger in dem Bild ist sehr klein, aber das sollte früh genug festgelegt werden.

Answer 1

Ich würde es so tun (ich habe einen einfacheren Code, wie ich habe keine Ubuntu-Touch-Komponenten), aber die Rotation Logik ist hier und der Winkel zur zweiten Umwandlung zu:

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

Funktioniert gut!