如何在渐变中动态添加停靠点
How to dynamically add stops in a Gradient
我有以下梯度:
Item {
id: base
width: 200
height: 100
start: Qt.point(0,0)
end: Qt.point(width, 0)
gradient: Gradient {
GradientStop { position: 0.0; color: "white"}
GradientStop { position: 0.5; color: "black" }
GradientStop { position: 1.0; color: "white"}
}
Gradient doesn't have any member functions to append new stops and neither does LinearGradient 的站点 属性。
如何添加停靠点以动态改变渐变?
另一种方法是每次更改时创建一个新的 LinearGradient。
Gradient
被定义为 list
属性,如链接文档中所述,不能直接由 appending/removing 元素修改
将新停靠点附加到 Gradient
的唯一方法是重新分配 stops
属性 list
。这是一个示例代码:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 200
height: 100
Rectangle {
id: base
anchors.fill: parent
gradient: Gradient {
id:gradient
GradientStop { position: 0.0; color: "white"}
GradientStop { position: 0.1; color: "black" }
GradientStop { position: 0.3; color: "white"}
}
Component
{
id:stopComponent
GradientStop {}
}
Component.onCompleted:
{
// Type 1: Aassign a all new stop list
var s1 = stopComponent.createObject(base, {"position":0.2,"color":"red"});
var s2 = stopComponent.createObject(base, {"position":0.4,"color":"yellow"});
var s3 = stopComponent.createObject(base, {"position":0.6,"color":"blue"});
gradient.stops = [s1,s2,s3];
// Type 2:Append to the original stop list
var newStops = [];
for (var idx = 0; idx < gradient.stops.length;idx++)
{
newStops.push(gradient.stops[idx]);
}
newStops.push(s3);
gradient.stops = newStops;
}
}
}
我有以下梯度:
Item {
id: base
width: 200
height: 100
start: Qt.point(0,0)
end: Qt.point(width, 0)
gradient: Gradient {
GradientStop { position: 0.0; color: "white"}
GradientStop { position: 0.5; color: "black" }
GradientStop { position: 1.0; color: "white"}
}
Gradient doesn't have any member functions to append new stops and neither does LinearGradient 的站点 属性。
如何添加停靠点以动态改变渐变?
另一种方法是每次更改时创建一个新的 LinearGradient。
Gradient
被定义为 list
属性,如链接文档中所述,不能直接由 appending/removing 元素修改
将新停靠点附加到 Gradient
的唯一方法是重新分配 stops
属性 list
。这是一个示例代码:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 200
height: 100
Rectangle {
id: base
anchors.fill: parent
gradient: Gradient {
id:gradient
GradientStop { position: 0.0; color: "white"}
GradientStop { position: 0.1; color: "black" }
GradientStop { position: 0.3; color: "white"}
}
Component
{
id:stopComponent
GradientStop {}
}
Component.onCompleted:
{
// Type 1: Aassign a all new stop list
var s1 = stopComponent.createObject(base, {"position":0.2,"color":"red"});
var s2 = stopComponent.createObject(base, {"position":0.4,"color":"yellow"});
var s3 = stopComponent.createObject(base, {"position":0.6,"color":"blue"});
gradient.stops = [s1,s2,s3];
// Type 2:Append to the original stop list
var newStops = [];
for (var idx = 0; idx < gradient.stops.length;idx++)
{
newStops.push(gradient.stops[idx]);
}
newStops.push(s3);
gradient.stops = newStops;
}
}
}