Change polygon color dynamically - qt

Question

I am trying to implement a functionality, where the color of drawn polygon can be dynamically changed. At the moment I have a simple test App where I am able to draw a triangle and rotate it. I then Added 2 buttons which are used to change the colors of all objects.
The rectangles and text colors change correctly but the drawn polygon do not. After random clicking the color change buttons eventually a new polygon is drawn but in an incorrect spot. I really can't tell what could be the problem.
Here is the code:
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 480
height: 800
Ucolors
{
id: colDay
canvas: "#eaedf1"
text: "#0e0e12"
spiderBckgrnd: "#f7fbff"
spiderLines: "#C8CBD0"
}
Ucolors
{
id: colNight
canvas: "#22212c"
text: "#ffffff"
spiderBckgrnd: "#0e0e12"
spiderLines: "#3C3C3F"
}
property var colGlob: colDay
Rectangle
{
id: rectMain
anchors.centerIn: parent
width: parent.width
height: parent.height
color: colGlob.canvas
Text
{
anchors.right: parent.right
color: colGlob.text
text: qsTr("text")
}
Button
{
id: btn1
anchors.left: parent.left
text: "button1"
onClicked:
{
colGlob = colNight;
}
}
Button
{
id: btn2
anchors.left: btn1.right
text: "button2"
onClicked:
{
colGlob = colDay;
}
}
Rectangle
{
id: rectTemp
anchors.centerIn: parent
width: 374
height: 432
//color: "transparent"
color: "red"
Utriangle
{
trbase: 183
rotAngle: 30
fillColor: colGlob.spiderBckgrnd
strokeColor: colGlob.spiderLines
anchors.centerIn: parent
}
}
}
}
Ucolors.qml
import QtQuick 2.9
/**
* #brief Holds the color parameters of the whole UI
*
*/
Item
{
property var canvas
property var text
property var spiderBckgrnd
property var spiderLines
}
Utriangle.qml
import QtQuick 2.9
/**
* #brief This object draws an equilateral triangle in the middle of the
* parent object. The triangle at \p rotAngle 0 is being drawn
starting from one of the corners facing down.
\p hFactor of 1 will draw a triangle with the height that coresponds
to the set \p base. Fractional values will make the triangle height
shorter accordingly.
*
*/
Canvas
{
anchors.fill: parent
// set properties with default values
property real hFactor: 1 // height factor
property int trbase: 50
property color strokeColor: "black"
property color fillColor: "yellow"
property int lineWidth: 1
property real alpha: 1
property real rotAngle: 0
onStrokeColorChanged: requestPaint();
onFillColorChanged: requestPaint();
onLineWidthChanged: requestPaint();
onPaint:
{
var ctx = getContext("2d") // get context to draw with
ctx.lineWidth = lineWidth
ctx.strokeStyle = strokeColor
ctx.fillStyle = fillColor
ctx.globalAlpha = alpha
ctx.beginPath()
ctx.translate(parent.width / 2, parent.height / 2)
ctx.rotate((Math.PI / 180) * rotAngle)
ctx.moveTo(0, 0)
// drawing part, first calculate height using Pythagoras equation
var trheight = Math.sqrt(Math.pow(trbase, 2) - Math.pow(trbase / 2, 2))
trheight = trheight * Math.abs(hFactor)
var hfBase = trbase * Math.abs(hFactor)
ctx.lineTo(hfBase / -2, trheight) // left arm
ctx.lineTo(hfBase / 2, trheight) // right arm
ctx.closePath(); // base drawn aoutomatically
ctx.fill()
ctx.stroke()
}
}
The gui before changing the colors:
The gui after changing the colors:
After clicking the button for a while, eventually the triangle shows up in the wrong spot:

Answer 1

The color is changed but in a rotated triangle since the operations of rotation and translation are maintained, so after a certain amount of clicked you see half of a triangle of the right color. The solution is to save the state prior to the transformations and restore it after painting with save() and restore().
onPaint:
{
var ctx = getContext("2d") // get context to draw with
ctx.lineWidth = lineWidth
ctx.strokeStyle = strokeColor
ctx.fillStyle = fillColor
ctx.globalAlpha = alpha
ctx.save(); // <---
ctx.beginPath()
ctx.translate(parent.width / 2, parent.height / 2)
ctx.rotate((Math.PI / 180) * rotAngle)
ctx.moveTo(0, 0)
// drawing part, first calculate height using Pythagoras equation
var trheight = Math.sqrt(Math.pow(trbase, 2) - Math.pow(trbase / 2, 2))
trheight = trheight * Math.abs(hFactor)
var hfBase = trbase * Math.abs(hFactor)
ctx.lineTo(hfBase / -2, trheight) // left arm
ctx.lineTo(hfBase / 2, trheight) // right arm
ctx.closePath(); // base drawn aoutomatically
ctx.fill()
ctx.stroke()
ctx.restore(); // <---
}