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ファイルでは、私は、この要素を使用し、以下に示すように、それに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：秒針がイメージ内で非常に小さいことを認識していますが、すぐに修正する必要があります。

Answer 1

私は（私はUbuntuのタッチコンポーネントを持っていないようシンプルなコードをしました）このようにそれを行うだろうが、回転論理はここにあり、あまりにも第2の変換への角度：

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

正常に動作します。