드래그하여 qml 사각형을 회전하는 방법은 무엇입니까?

Question

시계 입력을 마우스로 드래그하여 시간을 설정할 수있는 시계 타이머를 만듭니다. 아래 그림과 같이 이러한 목적을 위해 내가 주 QML 파일에서

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

을 AnalogClockHand 요소를 정의, 나는

이 요소를 사용하고 아래와 같이에 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

나는 (내가 우분투 접촉 구성 요소를 가지고 있지 않는 한 간단한 코드를했다) 같이 그것을 할 것이지만, 회전 로직은 여기에 너무 두 번째 변환 각도 :

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

잘 작동합니다!