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



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


  • Moderators

    Hi!

    Signal/slot connection in QML works like this:

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

    Cheers!


  • Moderators

    Or you could simply write:

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



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


  • Moderators

    "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!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.