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

Draw a line between two mouse clicks.



  • I am trying to make something like a small drawing app and I need to make it draw a line between two mouse clicks. I'm new to qml so I used some code from other websites but my idea was like this:

    import QtQuick 2.0
    
    Rectangle {
        width: 720
        height: 720
    
        property int xpos
        property int ypos
        property int prevxpos
        property int prevypos
        Canvas {
            id: myCanvas
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            anchors.fill: parent
            renderTarget: Canvas.Image
            renderStrategy: Canvas.Immediate
            onPaint: {
                var ctx = getContext('2d')
                ctx.fillStyle = "blue"
                ctx.fillRect(xpos-3, ypos-1, 5, 5)
                ctx.lineWidth = 7;
                                ctx.strokeStyle = "red"
                                ctx.beginPath()
                                ctx.moveTo(prevxpos, prevypos)
                                ctx.lineTo(xpos, ypos)
    
                                ctx.stroke()
    
            }
    
            MouseArea{
                anchors.fill: parent
                onPressed: {
                    prevxpos = ypos
                    prevypos = xpos
                    xpos = mouseX
                    ypos = mouseY
                    myCanvas.requestPaint()
                }
                onMouseXChanged: {
                    var prevxpos = xpos
                    var prevypos = xpos
                    xpos = mouseX
                    ypos = mouseY
                    myCanvas.requestPaint()
                }
                onMouseYChanged: {
                    var prevxpos = xpos
                    var prevypos = ypos
                    xpos = mouseX
                    ypos = mouseY
                    myCanvas.requestPaint()
                }
    }
    
    

    prevxpos recieves the value of xpos before xpos gets updated and then onPaint darws a line between the two points. However, the line just doesn't appear. What am I doing wrong?