Làm cách nào để xoay hình chữ nhật qml bằng cách kéo?

Question

Tôi đang tạo đồng hồ hẹn giờ có thể đặt thời gian bằng cách kéo bàn tay đồng hồ (sử dụng đầu vào hoặc chuột cảm ứng). Với mục đích này, tôi đã xác định một yếu tố AnalogClockHand như hình dưới đây,

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

Trong tập tin QML chính, tôi đã sử dụng yếu tố này và thêm một mouseArea với nó như hình dưới đây,

chính QML tập

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

Logic này là tuy nhiên không hoạt động bình thường và rất dễ bong tróc. Vì vậy, người ta không thể đặt thời gian trôi chảy. Vào cuối ngày, tôi đang cố gắng thực hiện một cái gì đó như thể hiện trong hình dưới đây. Người dùng có thể di chuyển giờ, phút hoặc giây để đặt thời gian.

Có một logic mã tốt hơn mà tôi có thể triển khai không?

Lưu ý 1: Tôi nhận ra rằng bàn tay thứ hai là rất nhỏ trong hình ảnh, nhưng điều đó cần được khắc phục sớm.

Answer 1

tôi sẽ làm điều đó như thế này (tôi đã làm một đoạn code đơn giản như tôi không có Ubuntu cảm ứng Linh kiện), nhưng logic luân là ở đây và góc để chuyển đổi thứ hai quá:

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

Hoạt động tốt!