Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to change the color of lines created by Canvas?



  • Hi all,

    I created a painted image using canvas "fillRect" with the color of "blue". After the process of painting, I want to change my painted rectangles' color to another desired color(like black,yellow etc.). Here is my code:

    Canvas {
                                id: mycanvas
                                width: 300
                                height: 300                            
                                property real lastX
                                property real lastY
                                onPaint: {
                                var ctx = getContext("2d");                            
                                ctx.fillStyle = "blue";                                 
                                lastX = painter_object.x+painter_object.width/2
                                lastY = painter_object.y+painter_object.width/2
                                ctx.fillRect(painter_object.x, painter_object.y, painter_object.width, painter_object.width);
                                ctx.fill()
                                ctx.stroke();
    }
            }
    


  • @Yunus Hello, it is simple, define a property for the fill color and listen on it changes:

    Canvas {
        id: mycanvas
        width: 300
        height: 300                            
        property real lastX
        property real lastY
        property color fillColor: "blue"
        onFillColorChanged: requestPaint();
        onPaint: {
            var ctx = getContext("2d");                            
            ctx.fillStyle = "blue";                                 
            lastX = painter_object.x+painter_object.width/2
            lastY = painter_object.y+painter_object.width/2
            ctx.fillRect(painter_object.x, painter_object.y, painter_object.width, painter_object.width);
            ctx.fill()
            ctx.stroke();
        }
    }
    

    Now, you just have to change the fillColor property to redraw the canvas


  • Moderators

    to add to @KroMignon
    If you do not call ctx.reset() at the beginning of your onPaint event, you'll draw over the old stuff. That will cause problems, if you draw something with alpha component.

    So keep that in mind



  • @KroMignon Thanks for ur reply. But when I tried ur code, color of rectangles is changing. But its not updating the previous painted rectangles with the current color. It is only changing the colors of future rectangles.



  • @J-Hilk Thanks for ur advice. But my problem is with old stuff :). I want to change the color of old stuff


  • Moderators

    @Yunus than you'll have to call reset() and redraw the old image/structure with the new color



  • @J-Hilk Is there a way to redraw with automatically by the program?



  • Can I assign the coordinates of painted rectangles to an array then draw these rectangles again? Can this be a solution?


  • Moderators

    @Yunus

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 100
        height: 100
        title: qsTr("Hello World")
    
        id:window
    
        Item{
            id:myItem
            anchors.fill: parent
    
            property int iteration: 0
            onIterationChanged: myCanvas.requestPaint()
            Timer{
                id: tRedraw
                interval: 20
                repeat: true
                running: true
                onTriggered: {
                    myItem.iteration++
                    if(myItem.iteration > window.width)
                        myItem.iteration = 0
                }
            }
    
            property var colors: ["blue", "red", "yellow", "green"]
    
            Canvas{
                id:myCanvas
                anchors.fill: parent
    
                onPaint:{
                    var ctx = getContext("2d");
                   ctx.fillStyle = myItem.colors[(myItem.iteration % 4)];
                   ctx.fillRect(myItem.iteration, myItem.iteration, window.width - (myItem.iteration * 2), window.height - (myItem.iteration * 2));
                   ctx.fill()
                   ctx.stroke();
                }
            }
        }
    }
    
    

    CanvasExample.gif



  • @J-Hilk I still dont think this is a solution for me or I am thinking wrongly. Let me be more clear. I have an image which is painted with blue rectangles. After the painting process, I want to press a button and want these blue painted rectangles to change to a different color. Image is below:

    1222.jpg


  • Moderators

    @Yunus well, no drawn is drawn.

    You can however save the rectangles, those that you draw, in an array. And when you want to change the color you clear the canvas (reset()) and paint them all anew from that array, but with a different color



  • @J-Hilk If it seems the only solution, I ll try it, Thanks again



  • @Yunus I solved my problem by assigning painted rectangles's points to array and redrawing them.


Log in to reply