問題設置Qt- QML CoverFlow旋轉角度

Question

我在裝有OS-X 10.8.4的Mac上運行Qt 5.1和QtQuick 2.0。

我無法設置一個可變角度的變換：旋轉{}元件，這樣：

transform: Rotation { 
    axis { x: 0; y: 1; z: 0 } 
    angle: PathView.angle 
} 

其中PathView.angle對於每個圖像元素而變化。我遵循代碼here for a cover-flow style container，但該示例也不起作用。

總之，在底部的代碼產生（參見例1中的註釋）：

它獲取使用可變PathAttribute角度委託矩形的角度：

PathAttribute { name: "angle"; value: somevalue } 

然後角度設定使用：

rotation: PathView.angle 

但這不是我想要的，因爲旋轉軸是圍繞z軸定義的（我需要將旋轉角度定義爲y）。因此，我想更接近於（情況2）：

現在的旋轉軸線是正確的，但爲每個矩形的角度都是常數（60度，如在代碼中定義的）。我的代碼下面的情況3是我想要的工作，但這給了一個錯誤（每個圖像容器一次），因爲一個可變的角度似乎不適用於變換：旋轉{} :(爲什麼？）

Unable to assign [undefined] to double 

如何使這項工作有什麼建議？

謝謝！

下面是最簡單的QML代碼，說明了什麼，我試圖做的：

import QtQuick 2.0 

Rectangle { 
    id: mainRect 
    width: 1024; height: 300 

    // Flow View: 
    Rectangle { 
     width: parent.width; height: parent.height 
     color: "gray" 

     PathView { 
      id: myPV 
      delegate: pathdelegate 
      anchors.fill: parent 
      model: 11 // provide a range of indices 

      Keys.onLeftPressed: if (!moving && interactive) incrementCurrentIndex() 
      Keys.onRightPressed: if (!moving && interactive) decrementCurrentIndex() 

      preferredHighlightBegin: 0.5 
      preferredHighlightEnd: 0.5 
      focus: true 
      interactive: true 

      path: Path { 
       id: pathElement 
       startX: 0; startY: myPV.height/2 
       PathAttribute { name: "z"; value: 0 } 
       PathAttribute { name: "angle"; value: 60 } 
       PathAttribute { name: "scale"; value: 0.5 } 
       PathLine { x: myPV.width/2; y: myPV.height/2; } 
       PathAttribute { name: "z"; value: 100 } 
       PathAttribute { name: "angle"; value: 0 } 
       PathAttribute { name: "scale"; value: 1.0 } 
       PathLine { x: myPV.width; y: myPV.height/2; } 
       PathAttribute { name: "z"; value: 0 } 
       PathAttribute { name: "angle"; value: -60 } 
       PathAttribute { name: "scale"; value: 0.5 } 
      } 
     } 

     // Delegate Component: 
     Component { 
      id: pathdelegate 
      Rectangle { 
       id: rect 
       width: 256; height: 256 
       z: PathView.z 
       scale: PathView.scale 
       color: "black" 
       border.color: "white" 
       border.width: 3 

       // Case 1: This works: 
       rotation: PathView.angle 

       //Case 2: This works: 
       //transform: Rotation { 
       // axis { x: 0; y: 1; z: 0 } 
       // angle: 60 
       //} 

       // Case 3: This is the case that I need to work: 
       // This DOES NOT work: 
       // transform: Rotation { 
       // axis { x: 0; y: 1; z: 0 } 
       // angle: PathView.angle 
       //} 
      } 

     } // End: Delegate Component 

    } // End: Flow View: 

} // End: mainRect 

Answer 1

試試這個http://habrahabr.ru/post/190090/

import QtQuick 2.0 

Rectangle { 
    property int itemAngle: 60 
    property int itemSize: 300 

    width: 1200 
    height: 400 

    ListModel { 
     id: dataModel 

     ListElement { 
      color: "orange" 
      text: "first" 
     } 
     ListElement { 
      color: "lightgreen" 
      text: "second" 
     } 
     ListElement { 
      color: "orchid" 
      text: "third" 
     } 
     ListElement { 
      color: "tomato" 
      text: "fourth" 
     } 
     ListElement { 
      color: "skyblue" 
      text: "fifth" 
     } 
     ListElement { 
      color: "hotpink" 
      text: "sixth" 
     } 
     ListElement { 
      color: "darkseagreen" 
      text: "seventh" 
     } 
    } 

    PathView { 
     id: view 

     anchors.fill: parent 
     model: dataModel 
     pathItemCount: 6 

     path: Path { 
      startX: 0 
      startY: height/2 

      PathPercent { value: 0.0 } 
      PathAttribute { name: "z"; value: 0 } 
      PathAttribute { name: "angle"; value: itemAngle } 
      PathAttribute { name: "origin"; value: 0 } 
      PathLine { 
       x: (view.width - itemSize)/2 
       y: view.height/2 
      } 
      PathAttribute { name: "angle"; value: itemAngle } 
      PathAttribute { name: "origin"; value: 0 } 
      PathPercent { value: 0.49 } 
      PathAttribute { name: "z"; value: 10 } 


      PathLine { relativeX: 0; relativeY: 0 } 

      PathAttribute { name: "angle"; value: 0 } 
      PathLine { 
       x: (view.width - itemSize)/2 + itemSize 
       y: view.height/2 
      } 
      PathAttribute { name: "angle"; value: 0 } 
      PathPercent { value: 0.51 } 

      PathLine { relativeX: 0; relativeY: 0 } 

      PathAttribute { name: "z"; value: 10 } 
      PathAttribute { name: "angle"; value: -itemAngle } 
      PathAttribute { name: "origin"; value: itemSize } 
      PathLine { 
       x: view.width 
       y: view.height/2 
      } 
      PathPercent { value: 1 } 
      PathAttribute { name: "z"; value: 0 } 
      PathAttribute { name: "angle"; value: -itemAngle } 
      PathAttribute { name: "origin"; value: itemSize } 
     } 
     delegate: Rectangle { 
      id: rectDelegate 
      width: itemSize 
      height: width 
      z: PathView.z 
      color: model.color 
      border { 
       color: "black" 
       width: 1 
      } 
      transform: Rotation { 
       axis { x: 0; y: 1; z: 0 } 
       angle: rectDelegate.PathView.angle 
       origin.x: rectDelegate.PathView.origin 
      } 

      Text { 
       anchors.centerIn: parent 
       font.pointSize: 32 
       text: model.text 
      } 
     } 
    } 
} 

當提到從子對象的附加屬性，你必須參考通過父母的財產。欲瞭解更多信息，請參閱documentation。