オリエンテーション付きのQMLグラジエント

Question

QMLグラジエントでは、矩形の上から下へのみ許可されます。 documentationは、 は回転とクリッピングの組み合わせで行う必要があると言います。

私はちょうどQMLを学び始めました（そしてHTML/CSSの経験もほとんどありません）。ここで私は多くの方のために改善することができると思う私のコードは次のとおりです。

import QtQuick 1.0 

Rectangle { 
    width: 400; height: 400; 

    Rectangle { 
    width: 567; height: 567; 

    gradient: Gradient { 
      GradientStop { 
     position: 0.0; 
     color: "white"; 
     } 
      GradientStop { 
     position: 1.0; 
     color: "blue"; 
     } 
    } 
    x: 116.5; 
    transformOrigin: Item.Top; 
    rotation: 45.0; 
    } 
} 

あなたがこれを行うには良い方法であるかを提案してくださいことはできますか？

Answer 1

私はドキュメントが正しいことを恐れています。 私が考えることができる唯一の他の方法は、あなたが望むことをするC++でカスタムQMLコンポーネントを書くことです。

あなたはQT/C++の知識をお持ちの場合は、ここに始めることができ：

• http://doc.qt.nokia.com/4.7-snapshot/qml-extending.html
• http://doc.qt.nokia.com/4.7-snapshot/declarative-tutorials-extending-chapter1-basics.html

をRectangleが良いテンプレートやベースクラスのようになります。

• http://qt.gitorious.org/qt/qt/blobs/4.8/src/declarative/graphicsitems/qdeclarativerectangle_p.h

Answer 2

私は、次のコードで、このproblingを解決しました：

Rectangle { 
     width: parent.height 
     height: parent.width 
     anchors.centerIn: parent 
     rotation: 90 

     gradient: Gradient { 
      GradientStop { position: 0.0; color: "black" } 
      GradientStop { position: 1.0; color: "white" } 
     } 
    } 

そして、これがうまく機能している：ここでhttps://code.google.com/p/ytd-meego/source/browse/trunk/playground/FeedBook/qmltube/HorizontalGradient.qml?r=144

は、私がNielsMayerの例を使用して行われてきたものです。楽しむ ！

Answer 3

Qt 5.1で導入されたQtグラフィカルエフェクトモジュールには、3つの勾配タイプがあります。 LinearGradientアイテム（効果）では、水平の色勾配を実現するために回転を適用する必要はなくなりました。 特にLinearGradientは、そのstartとendポイント（属性）を使用して、の勾配方向をとすることができます。

import QtQuick 2.0 
import QtGraphicalEffects 1.0 

Item { 
    width: 300 
    height: 300 

    LinearGradient { 
     anchors.fill: parent 
     start: Qt.point(0, 0) 
     end: Qt.point(0, 300) 
     gradient: Gradient { 
      GradientStop { position: 0.0; color: "white" } 
      GradientStop { position: 1.0; color: "black" } 
     } 
    } 
}