Free Hand Paint on Canvas

[binary001]

Hi,

I develop a project that can draw as freehand style on canvas.
program is successfully run but it does not paint any stroke on canvas.


main.cpp

#include <QGuiApplication>
#include <QtQuick/qquickview.h>
#include <QDebug>
 
int main(int argc, char ** argv)
{
    QGuiApplication app(argc, argv);
 
    QQuickView view;
    view.setSource(QUrl("main.qml"));
    view.setWidth(768);
    view.setHeight(263);
    view.show();
 
    return app.exec();
}

#include <QGuiApplication>
#include <QtQuick/qquickview.h>
#include <QDebug>

int main(int argc, char ** argv)
{
    QGuiApplication app(argc, argv);

    QQuickView view;
    view.setSource(QUrl("main.qml"));
    view.setWidth(768);
    view.setHeight(263);
    view.show();

    return app.exec();
}

To copy to clipboard, switch view to plain text mode 

main.qml

import QtQuick 2.4
 
Item {
    id:root
    width:768
    height:263
    anchors.margins: 4
 
    Writing {
            id:canvas
            width: 768;      
            height:263;   
            x: 0
            y: 0
            }
 
    Text {
        id: text;
        width: 140;
        font.family: "Arial"
        font.pointSize: 20
        wrapMode: Text.Wrap;
        anchors.top: parent.top;
        anchors.right: parent.right;
        anchors.rightMargin: 20;
        anchors.topMargin: -10;
        text: ""
        }
 
    Item {
        id:clearbutton
        width:100
        height:65
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 100
 
    MouseArea {
        anchors.fill : parent
        onClicked: canvas.clear();
        }
    }
}

import QtQuick 2.4

Item {
    id:root
    width:768
    height:263
    anchors.margins: 4

    Writing {
            id:canvas
            width: 768;      
            height:263;   
            x: 0
            y: 0
            }

    Text {
        id: text;
        width: 140;
        font.family: "Arial"
        font.pointSize: 20
        wrapMode: Text.Wrap;
        anchors.top: parent.top;
        anchors.right: parent.right;
        anchors.rightMargin: 20;
        anchors.topMargin: -10;
        text: ""
        }

    Item {
        id:clearbutton
        width:100
        height:65
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 100

    MouseArea {
        anchors.fill : parent
        onClicked: canvas.clear();
        }
    }
}

To copy to clipboard, switch view to plain text mode 

Writing.qml

import QtQuick 2.4
 
 
Canvas {
    id:canvas
    property int paintX
    property int paintY
    property int count: 0
    property int lineWidth: 5
    property color drawColor: "black"
    property int strokes: 0
 
    MouseArea {
        id:mousearea
        hoverEnabled:true
        anchors.fill: parent
        onClicked: drawPoint();
 
        onPositionChanged: {
                if (mousearea.pressed) {
                    drawLineSegment();
                }
            paintX = mouseX;
            paintY = mouseY;
        }
 
        onReleased: {
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = lineWidth
            ctx.moveTo(paintX, paintY);
            ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
            console.log("line X:"+ mousearea.mouseX +"Y: " + mousearea.mouseY );
            ctx.stroke();
            ctx.closePath();
            strokes++;
        }
 
    }
 
    function drawLineSegment() {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.strokeStyle = "blue"
        ctx.lineWidth = lineWidth
        ctx.moveTo(paintX, paintY);
        ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
        console.log("line X:"+ mousearea.mouseX +"Y: " + mousearea.mouseY );
        ctx.stroke();
        ctx.closePath();
    }
 
    function drawPoint() {
        var ctx = canvas.getContext('2d');
        ctx.lineWidth = lineWidth
        ctx.fillStyle = drawColor
        ctx.fillRect(mousearea.mouseX, mousearea.mouseY, 2, 2);
        console.log("line X:"+ mousearea.mouseX +"Y: " + mousearea.mouseY );
    }
 
    function clear() {
        var ctx = canvas.getContext('2d');
        strokes=0;
        text.text = "";
        ctx.clearRect(0, 0, width, height);
    }
 
 
}

import QtQuick 2.4


Canvas {
    id:canvas
    property int paintX
    property int paintY
    property int count: 0
    property int lineWidth: 5
    property color drawColor: "black"
    property int strokes: 0

    MouseArea {
        id:mousearea
        hoverEnabled:true
        anchors.fill: parent
        onClicked: drawPoint();

        onPositionChanged: {
                if (mousearea.pressed) {
                    drawLineSegment();
                }
            paintX = mouseX;
            paintY = mouseY;
        }

        onReleased: {
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = lineWidth
            ctx.moveTo(paintX, paintY);
            ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
            console.log("line X:"+ mousearea.mouseX +"Y: " + mousearea.mouseY );
            ctx.stroke();
            ctx.closePath();
            strokes++;
        }

    }

    function drawLineSegment() {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.strokeStyle = "blue"
        ctx.lineWidth = lineWidth
        ctx.moveTo(paintX, paintY);
        ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
        console.log("line X:"+ mousearea.mouseX +"Y: " + mousearea.mouseY );
        ctx.stroke();
        ctx.closePath();
    }

    function drawPoint() {
        var ctx = canvas.getContext('2d');
        ctx.lineWidth = lineWidth
        ctx.fillStyle = drawColor
        ctx.fillRect(mousearea.mouseX, mousearea.mouseY, 2, 2);
        console.log("line X:"+ mousearea.mouseX +"Y: " + mousearea.mouseY );
    }

    function clear() {
        var ctx = canvas.getContext('2d');
        strokes=0;
        text.text = "";
        ctx.clearRect(0, 0, width, height);
    }


}

To copy to clipboard, switch view to plain text mode 

How to fix it?

Thanks.

[dexterqt]

Replace following code snippet in your Writing.qml. This should get you going. The key is to implement onPaint() handler

import QtQuick 2.4
 
 
Canvas {
    id:canvas
    property int paintX
    property int paintY
    property int count: 0
    property int lineWidth: 5
    property color drawColor: "black"
    property int strokes: 0
 
    onPaint: drawPoint();
 
    MouseArea {
        id:mousearea
        hoverEnabled:true
        anchors.fill: parent
        onClicked: {
            paintX = mouseX;
            paintY = mouseY;
            requestPaint();
        }
 
        onPositionChanged: {
                if (mousearea.pressed) {
                    drawLineSegment();
                }
            paintX = mouseX;
            paintY = mouseY;
        }
 
        onReleased: {
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = lineWidth
            ctx.moveTo(paintX, paintY);
            ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
            console.log("line X:"+ mousearea.mouseX +"Y: " + mousearea.mouseY );
            ctx.stroke();
            ctx.closePath();
            strokes++;
        }
 
    }
 
    function drawLineSegment() {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.strokeStyle = "blue"
        ctx.lineWidth = lineWidth
        ctx.moveTo(paintX, paintY);
        ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
        console.log("line X:"+ mousearea.mouseX +"Y: " + mousearea.mouseY );
        ctx.stroke();
        ctx.closePath();
    }
 
    function drawPoint() {
        var ctx = canvas.getContext('2d');
        ctx.lineWidth = lineWidth
        ctx.fillStyle = drawColor
        ctx.fillRect(paintX, paintY, 2, 2);
        console.log("line X:"+ paintX +"Y: " + paintY );
    }
 
    function clear() {
        var ctx = canvas.getContext('2d');
        strokes=0;
        text.text = "";
        ctx.clearRect(0, 0, width, height);
    }
}

import QtQuick 2.4


Canvas {
    id:canvas
    property int paintX
    property int paintY
    property int count: 0
    property int lineWidth: 5
    property color drawColor: "black"
    property int strokes: 0

    onPaint: drawPoint();

    MouseArea {
        id:mousearea
        hoverEnabled:true
        anchors.fill: parent
        onClicked: {
            paintX = mouseX;
            paintY = mouseY;
            requestPaint();
        }

        onPositionChanged: {
                if (mousearea.pressed) {
                    drawLineSegment();
                }
            paintX = mouseX;
            paintY = mouseY;
        }

        onReleased: {
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = lineWidth
            ctx.moveTo(paintX, paintY);
            ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
            console.log("line X:"+ mousearea.mouseX +"Y: " + mousearea.mouseY );
            ctx.stroke();
            ctx.closePath();
            strokes++;
        }

    }

    function drawLineSegment() {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.strokeStyle = "blue"
        ctx.lineWidth = lineWidth
        ctx.moveTo(paintX, paintY);
        ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
        console.log("line X:"+ mousearea.mouseX +"Y: " + mousearea.mouseY );
        ctx.stroke();
        ctx.closePath();
    }

    function drawPoint() {
        var ctx = canvas.getContext('2d');
        ctx.lineWidth = lineWidth
        ctx.fillStyle = drawColor
        ctx.fillRect(paintX, paintY, 2, 2);
        console.log("line X:"+ paintX +"Y: " + paintY );
    }

    function clear() {
        var ctx = canvas.getContext('2d');
        strokes=0;
        text.text = "";
        ctx.clearRect(0, 0, width, height);
    }
}

To copy to clipboard, switch view to plain text mode