QML-Gradienten mit einer Ausrichtung

Question

QML-Farbverlauf ermöglicht nur von oben nach unten in einem Rechteck. Die documentation sagt, dass es durch Kombination von Rotation und Clipping getan werden muss.

Ich habe gerade angefangen, QML (und wenig Erfahrung mit HTML/CSS) zu lernen. Hier ist mein Code, die ich denken kann, für viel besser verbessert werden:

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

Können Sie bitte vorschlagen, was sind die besseren Möglichkeiten, dies zu tun?

Answer 1

Ich fürchte, die Dokumentation ist korrekt. Der einzige andere Weg, an den ich denken kann, ist eine benutzerdefinierte QML-Komponente in C++ zu schreiben, die das tut, was Sie wollen.

Wenn Sie Qt/C++ Kenntnisse haben können Sie hier beginnen:

• 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

Das Rechteck könnte eine gute Vorlage oder Basisklasse sein:

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

Answer 2

Ich habe dieses probling mit dem folgenden Code lösen: https://code.google.com/p/ytd-meego/source/browse/trunk/playground/FeedBook/qmltube/HorizontalGradient.qml?r=144

Hier ist, was ich am Beispiel NielsMayer getan:

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

Und dies gut funktioniert. Habe Spaß !

Answer 3

Das Modul Qt Graphical Effects, das in Qt 5.1 eingeführt wurde, bietet drei Gradiententypen. Mit dem Element (Effekt) LinearGradient ist es nicht länger notwendig, eine Drehung anzuwenden, um horizontale Farbverläufe zu erzielen. Insbesondere LinearGradient ermöglicht jeder Gradient Richtung mit Hilfe seiner start und end Punkt (Attribute).

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