QML. Поворот градиента

По умолчанию делается только горизонтальный градиент. Чтобы получить под другим углом, надо повернуть всю фигуру (прямоугольник), т.к. свойство rotation отсутствует у Gradient.

Круг можно получить установив у квадрата radius в 50.

Если требуется вертикальный градиент для прямоугольника, то тогда при его создании следует поменять значения местами для требуемых ширины и высоты. После поворота на 900 высота станет шириной.

Выходит, что получить градиетную заливку по диагонали и сохранить при этом прямоугольник не наклоненным, невозможно. Для круга такое возможно.

Поворот градиента в QML

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
 
Rectangle {
    width:500
    height:250
    gradient: Gradient {
        GradientStop {
            position: 0
            color: "#584d43"
        }
 
        GradientStop {
            position: 0.250
            color: "#ecd2b9"
        }
 
        GradientStop {
            position: 0.500
            color: "#584d43"
        }
 
        GradientStop {
            position: 0.750
            color: "#ecd2b9"
        }
 
        GradientStop {
            position: 1
            color: "#584d43"
        }
    }
 
    Rectangle {
        x: 61
        y: 75
        width: 150
        height: 100
        radius: 0
        rotation: 45
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#251a38"
            }
            GradientStop {
                position: 0.500
                color: "#ffffff"
            }
            GradientStop {
                position: 1
                color: "#251a38"
            }
        }
    }
 
    Rectangle {
        x: 344
        y: 75
        width: 100
        height: 100
        radius: 50
        rotation: 45
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#251a38"
            }
            GradientStop {
                position: 0.500
                color: "#ffffff"
            }
            GradientStop {
                position: 1
                color: "#251a38"
            }
        }
    }
 
}