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

私は、インジケータをアイテムの子にしないようにしました。私はX/Yの代わりにtransformスタックのTranslateを使ってみました。それらのすべてが面白いが、間違った回転をもたらす。

インジケータを自分のセンターの周りで回転させたり、目標を達成するにはどうすればよいですか？

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

だけItemにClockhandを回して色を取り外し、それを不可視にします。