Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    How to paint on qml canvas on signal clicked from qt quick contols button?

    QML and Qt Quick
    2
    5
    3870
    Loading More Posts
    • 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.
    • P
      pnmrvvtl last edited by

      I have example where painting on canvas in qml starts at beggining of application:
      @import QtQuick 2.0

      Canvas {
      id: root
      // canvas size
      width: 200; height: 200
      // handler to override for drawing
      onPaint: {
      // get context to draw with
      var ctx = getContext("2d")
      // setup the stroke
      ctx.lineWidth = 4
      ctx.strokeStyle = "blue"
      // setup the fill
      ctx.fillStyle = "steelblue"
      // begin a new path to draw
      ctx.beginPath()
      // top-left start point
      ctx.moveTo(50,50)
      // upper line
      ctx.lineTo(150,50)
      // right line
      ctx.lineTo(150,150)
      // bottom line
      ctx.lineTo(50,150)
      // left line through path closing
      ctx.closePath()
      // fill using fill style
      ctx.fill()
      // stroke using line width and stroke style
      ctx.stroke()
      }
      }@

      How to run this code for painting when i click at button created in qml. It seems to be like how to connect qml signal from button and slot in qlm for painting some figure without using c++. Thank you.

      1 Reply Last reply Reply Quote 0
      • ?
        A Former User last edited by

        Hi!

        Signal/slot connection in QML works like this:

        @
        Component.onCompleted: {
        mybutton.onClicked.connect( root.requestPaint )
        }
        @

        Cheers!

        1 Reply Last reply Reply Quote 0
        • ?
          A Former User last edited by

          Or you could simply write:

          @
          Button {
          text: "click"
          onClicked: root.requestPaint()
          }
          @

          1 Reply Last reply Reply Quote 0
          • P
            pnmrvvtl last edited by

            is "root" object created by me? and requestPaint() is slot created by me?

            1 Reply Last reply Reply Quote 0
            • ?
              A Former User last edited by

              "root" is the id of the canvas in your example and requestPaint() is a slot of the Canvas component. Take a look at the "Canvas documentation":http://doc.qt.io/qt-5/qml-qtquick-canvas.html to see what requestPaint() does.

              Cheers!

              1 Reply Last reply Reply Quote 0
              • First post
                Last post