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

Drawing issue



  • Hi! I use Canvas in my project to free draw anything with mouse, but while drawing all traces come out like on the picture below.

    Drawing issue example

    Here below is my code responsible for drawing:

        Canvas {
            id:canvas
            anchors.top: parent.top
            width: 640
            height: 410
    
            onPaint: {
                var ctx = getContext('2d')
    
                if(clearCanvas) {
                    ctx.fillStyle = "white"
                    ctx.fillRect(0,0,width,height)
                    clearCanvas=false
                }
                else {
                    ctx.lineWidth = 30
                    ctx.strokeStyle = 'blue'
                    ctx.beginPath()
                    ctx.moveTo(xpos,ypos)
                    xpos = area.mouseX
                    ypos = area.mouseY
                    ctx.lineTo(xpos, ypos)
                    ctx.stroke()
                }
            }
    
            MouseArea {
                id:area
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton | Qt.RightButton
    
                onPressed: {
                    if(mouse.buttons & Qt.LeftButton) {
                        hold=true
                        xpos = mouseX
                        ypos = mouseY
                    }
                }
    
                onPositionChanged: {
                    if(hold & (mouse.buttons & Qt.LeftButton)) {
                        canvas.requestPaint()
                    }
                }
    
                onReleased: {
                    hold = false
                }
    
                onClicked: {
                    infoArea.visible = false
                }
            } 
    

    Finally I want to have a solid line without gaps. Count on your help!


  • Moderators

    @Tikani Set lineCap to round

    ctx.lineCap = 'round';
    

Log in to reply