Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to change the color of lines created by Canvas?
Qt 6.12 LTS is out! See what's new in the release blog

How to change the color of lines created by Canvas?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
13 Posts 3 Posters 5.7k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J.HilkJ Offline
    J.HilkJ Offline
    J.Hilk
    Moderators
    wrote on last edited by
    #3

    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


    Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


    Q: What's that?
    A: It's blue light.
    Q: What does it do?
    A: It turns blue.

    YunusY 1 Reply Last reply
    3
    • KroMignonK KroMignon

      @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

      YunusY Offline
      YunusY Offline
      Yunus
      wrote on last edited by Yunus
      #4

      @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.

      1 Reply Last reply
      0
      • J.HilkJ J.Hilk

        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

        YunusY Offline
        YunusY Offline
        Yunus
        wrote on last edited by
        #5

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

        J.HilkJ 1 Reply Last reply
        0
        • YunusY Yunus

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

          J.HilkJ Offline
          J.HilkJ Offline
          J.Hilk
          Moderators
          wrote on last edited by
          #6

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


          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          1 Reply Last reply
          0
          • YunusY Offline
            YunusY Offline
            Yunus
            wrote on last edited by
            #7

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

            1 Reply Last reply
            0
            • YunusY Offline
              YunusY Offline
              Yunus
              wrote on last edited by
              #8

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

              J.HilkJ 1 Reply Last reply
              0
              • YunusY Yunus

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

                J.HilkJ Offline
                J.HilkJ Offline
                J.Hilk
                Moderators
                wrote on last edited by
                #9

                @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


                Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                Q: What's that?
                A: It's blue light.
                Q: What does it do?
                A: It turns blue.

                YunusY 1 Reply Last reply
                2
                • J.HilkJ J.Hilk

                  @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

                  YunusY Offline
                  YunusY Offline
                  Yunus
                  wrote on last edited by Yunus
                  #10

                  @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

                  J.HilkJ 1 Reply Last reply
                  0
                  • YunusY Yunus

                    @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

                    J.HilkJ Offline
                    J.HilkJ Offline
                    J.Hilk
                    Moderators
                    wrote on last edited by
                    #11

                    @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


                    Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                    Q: What's that?
                    A: It's blue light.
                    Q: What does it do?
                    A: It turns blue.

                    YunusY 1 Reply Last reply
                    1
                    • J.HilkJ J.Hilk

                      @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

                      YunusY Offline
                      YunusY Offline
                      Yunus
                      wrote on last edited by
                      #12

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

                      1 Reply Last reply
                      0
                      • YunusY Yunus

                        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();
                        }
                                }
                        
                        YunusY Offline
                        YunusY Offline
                        Yunus
                        wrote on last edited by
                        #13

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

                        1 Reply Last reply
                        1

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt
                        • Unsolved