QML的偏移旋轉項目

Question

在QML應用程序中，我有一個項目圍繞屏幕移動（不旋轉）。我想顯示一個圍繞此物品旋轉的指示器，指示器遠離屏幕中心，距離物品中心一段固定的距離。

以下簡化QML應用通過使指示器的項的子項，並將其轉化到所需位置執行該目標，。但是，當我嘗試旋轉指示器（註釋掉的代碼）時，找不到工作的origin.x和.y的任何值。感覺就像QML場景圖以我所經歷的方式計算X/Y定位。

import QtQuick 2.7 
import QtQuick.Window 2.2 

Window { 
    id: win 
    visible:true; width:600; height:300 
    property real padding: 50 
    property real angle: 0 
    property real _rads: angle * Math.PI/180 

    Timer { 
     interval:50; running:true; repeat:true 
     onTriggered:win.angle = (new Date/50) % 360 
    } 

    Rectangle { 
     id:object; color:'blue' 
     width:50; height:width 
     property real xOffset: Math.cos(_rads) 
     property real yOffset: Math.sin(_rads) 
     x: win.width/2 + xOffset * (win.width/2 - padding*2) 
     y: win.height/2 + yOffset * (win.height/2 - padding*2) 

     Rectangle { 
      id:indicator; color:'red' 
      property real centerOffset: 40 
      width:10; height:width*2 
      x: object.width/2 + object.xOffset * centerOffset - width/2 
      y: object.height/2 + object.yOffset * centerOffset - height/2 
//   transform: Rotation { origin.x:0; origin.y:0; angle:win.angle } 
     } 
    } 
} 

我試過讓指標不是該項目的孩子。我已嘗試在transform堆棧中使用Translate而不是X/Y位置。所有這些都會導致有趣但不正確的旋轉。

我該如何簡單地將指示器圍繞自己的中心旋轉，否則實現我的目標？

Answer 1

你可能會認爲它是一個時鐘，並建立自己的時鐘。

import QtQuick 2.7 
import QtQuick.Window 2.2 

Window { 
    id: win 
    visible:true; width:600; height:300 
    property real padding: 50 
    property real angle: 0 
    property real _rads: angle * Math.PI/180 

    Timer { 
     interval:50; running:true; repeat:true 
     onTriggered:win.angle = (new Date/50) % 360 
    } 

    Rectangle { 
     id:object; color:'blue' 
     width:50; height:width 
     property real xOffset: Math.cos(_rads) 
     property real yOffset: Math.sin(_rads) 
     x: win.width/2 + xOffset * (win.width/2 - padding*2) 
     y: win.height/2 + yOffset * (win.height/2 - padding*2) 


     Text { 
      width: 250 
      height: 250 
      x: -100 
      y: -100 
      text: '▲' 
      color: 'red' 
      font.pixelSize: 20 
      horizontalAlignment: Qt.AlignHCenter 
      verticalAlignment: Qt.AlignTop 

      transform: Rotation { 
       angle: win.angle + 90 
       origin.x: 125 
       origin.y: 125 
      } 
     } 

     Text { 
      x: 15 
      y: -125 
      width: 20 
      height: 20 

      text: '▲' 
      color: 'red' 
      font.pixelSize: 20 
      horizontalAlignment: Qt.AlignHCenter 
      verticalAlignment: Qt.AlignVCenter 

      transform: Rotation { 
       angle: win.angle + 90 
       origin.x: 10 
       origin.y: 150 
      } 
     } 


     Rectangle { 
      id: clockhand 
      width: 1 
      height: 100 
      color: 'black' 
      anchors { 
       centerIn: parent 
      } 

      rotation: win.angle + 90 

      Text { 
       text: '▲' 
       color: 'red' 
       anchors { 
        horizontalCenter: parent.horizontalCenter 
        bottom: parent.top 
        bottomMargin: -5 
       } 
       font.pixelSize: 20 
      } 
     } 
    } 
} 

只要將Clockhand變成Item並刪除顏色，使其不可見。