Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML Canvas Reload DrawImage
Qt 6.11 is out! See what's new in the release blog

QML Canvas Reload DrawImage

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 962 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.
  • E Offline
    E Offline
    electronicsengineer8
    wrote on last edited by
    #1

    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()
                }
            }
    
    1 Reply Last reply
    0

    • Login

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