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

QML Canvas Reload DrawImage



  • I develop an app with a feature whiteboard, the canvas will catch mouse motion dan painting to canvas.
    Then the user can save the last state, done by saving the last state to image/png.

    The problem is when I load the last state, the canvas cannot load a fresh image event after I replace the screen (i use stack view).

    Home Screen > Open Menu > Open Canvas > Load Last Draw (success) > User Draw New Line > Save (Image/png on disk already updated, success) > Back to Menu > Open Again Canvas > Load Last Draw (This the problem, canvas still draw previous one, not Image/png with User Draw New Line )

    Canvas {
                id: drawCanvas
                anchors.fill: parent
                property bool firstLoad: true
    
                property var arrpoints : []
                onArrpointsChanged: console.log(arrpoints.length)
    
                MouseArea {
                    id: mousearea
                    anchors.fill: parent
                    onPressed: {prevX = mouseX ; prevY = mouseY}
                    onPositionChanged: drawCanvas.requestPaint();
                }
                Component.onCompleted: {
                    loadImage(imgPath)
                }
                onImageLoaded: requestPaint()
    
                onPaint: {
                    var ctx = drawCanvas.getContext("2d");
                    if(firstLoad){
                        console.log("firtsLoad")
                        firstLoad = false
                        ctx.drawImage(imgPath, 0, 0);
                        ctx.save()
                    }
                    if(!firstLoad){
                        console.log("painting: " + mousearea.mouseX + " " + mousearea.mouseY)
                        drawCanvas.arrpoints.push({"x" : mousearea.mouseX, "y" : mousearea.mouseY})
                        ctx.beginPath();
                        ctx.strokeStyle = drawColor
                        ctx.lineWidth = lineWidth
                        ctx.moveTo(prevX, prevY);
                        ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
                        ctx.stroke();
                        ctx.closePath();
                        prevX = mousearea.mouseX;
                        prevY = mousearea.mouseY;
                        //                }
                    }
                }
    
                function clear(){
                    var ctx = drawCanvas.getContext('2d')
                    ctx.reset()
                    drawCanvas.requestPaint()
                }
            }
    

Log in to reply