neda
9th November 2016, 12:34
Hi,
I want to create animated gradient arrow. I used the following code, but it does not show animated gradient.
Canvas {
id: arrowDown
width: parent.height/3
height: width
antialiasing: true
anchors.centerIn: parent
property color secondaryColor: "blue"
property real centerWidth: width / 2
property real centerHeight: height / 2
property real radius: (Math.min(arrowDown.width, arrowDown.height)*2) / (2*Math.PI)
onSecondaryColorChanged: requestPaint()
onVisibleChanged: requestPaint()
onPaint: {
var ctx = getContext("2d");
ctx.save();
ctx.clearRect(0, 0, arrowDown.width, arrowDown.height);
ctx.beginPath();
ctx.lineWidth = 8;
ctx.moveTo(arrowDown.centerWidth,
arrowDown.centerHeight-arrowDown.radius/2);
ctx.strokeStyle = secondaryColor
ctx.lineTo(arrowDown.centerWidth,
arrowDown.centerHeight+arrowDown.radius/2);
ctx.lineTo(arrowDown.centerWidth+arrowDown.centerW idth/4,
arrowDown.centerHeight+arrowDown.radius/4);
ctx.moveTo(arrowDown.centerWidth,
arrowDown.centerHeight+arrowDown.radius/2);
ctx.lineTo(arrowDown.centerWidth-arrowDown.centerWidth/4,
arrowDown.centerHeight+arrowDown.radius/4);
var gradient = ctx.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0.3, Qt.rgba(1, 0, 0, 1));
gradient.addColorStop(0.7, "white");
ctx.stroke();
ctx.restore();
}
Timer {
interval: 200
repeat: true
running: true
onTriggered: {
???
arrowDown.requestPaint()
}
}
}
I want to create animated gradient arrow. I used the following code, but it does not show animated gradient.
Canvas {
id: arrowDown
width: parent.height/3
height: width
antialiasing: true
anchors.centerIn: parent
property color secondaryColor: "blue"
property real centerWidth: width / 2
property real centerHeight: height / 2
property real radius: (Math.min(arrowDown.width, arrowDown.height)*2) / (2*Math.PI)
onSecondaryColorChanged: requestPaint()
onVisibleChanged: requestPaint()
onPaint: {
var ctx = getContext("2d");
ctx.save();
ctx.clearRect(0, 0, arrowDown.width, arrowDown.height);
ctx.beginPath();
ctx.lineWidth = 8;
ctx.moveTo(arrowDown.centerWidth,
arrowDown.centerHeight-arrowDown.radius/2);
ctx.strokeStyle = secondaryColor
ctx.lineTo(arrowDown.centerWidth,
arrowDown.centerHeight+arrowDown.radius/2);
ctx.lineTo(arrowDown.centerWidth+arrowDown.centerW idth/4,
arrowDown.centerHeight+arrowDown.radius/4);
ctx.moveTo(arrowDown.centerWidth,
arrowDown.centerHeight+arrowDown.radius/2);
ctx.lineTo(arrowDown.centerWidth-arrowDown.centerWidth/4,
arrowDown.centerHeight+arrowDown.radius/4);
var gradient = ctx.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0.3, Qt.rgba(1, 0, 0, 1));
gradient.addColorStop(0.7, "white");
ctx.stroke();
ctx.restore();
}
Timer {
interval: 200
repeat: true
running: true
onTriggered: {
???
arrowDown.requestPaint()
}
}
}