How to draw a line from point A to point B by mouse click

[timob256]

I try to draw a line from point A to point B, but for some reason it doesn't.

The code:

Window {
    // вот тут переменные first tochka and dwa tochka
    property var cliced_x0 : 0;
    property var cliced_y0 : 0;
    property var cliced_x1 : 0;
    property var cliced_y1 : 0;
    property var bool_cliced : false;
    ...
    Canvas {
        id: canvas
        
        property color color: colorTools.paintColor
        
        ...
        onPaint: {
            ...
            var ctx = getContext('2d')
            ctx.lineWidth = 1.5
            ctx.strokeStyle = canvas.color
            ctx.beginPath()
            ctx.moveTo(cliced_x0, cliced_y0)
            ctx.lineTo(cliced_x1, cliced_y1)
            ctx.stroke()
        }
        MouseArea {
            id: area
            anchors.fill: parent
            
            onClicked: {
                if (bool_cliced === false)
                {
                    cliced_x0 = mouseX;
                    cliced_y0 = mouseY;
                    bool_cliced = true;
                }
                if(bool_cliced === true)
                {
                    cliced_x1 = mouseX;
                    cliced_y1 = mouseY;
                    bool_cliced = false;
                }
            }
        }
    }
}

what am I doing wrong  ??

[KroMignon]

@timob256 said in How to draw a line from point A to point B by mouse click:

if (bool_cliced == false)
{
cliced_x0 = area.mouseX;
cliced_y0 = area.mouseY;
bool_cliced = true;
}
if(bool_cliced == true)
{
cliced_x1 = area.mouseX;
cliced_y1 = area.mouseY;
bool_cliced = false;
canvas.requestPaint()
}

I would change this to:

if (bool_cliced == false)
{
    cliced_x0 = area.mouseX;
    cliced_y0 = area.mouseY;
}
else
{
    cliced_x1 = area.mouseX;
    cliced_y1 = area.mouseY;
    canvas.requestPaint()
}
bool_cliced = !bool_cliced;

[sierdzio]

Try calling requestPaint() (https://doc.qt.io/qt-5/qml-qtquick-canvas.html#requestPaint-method) after you do the second click.

Also, your variables can be of int type - avoid var if you can!

[timob256]

@sierdzio said in How to draw a line from point A to point B by mouse click:

requestPaint()

Sorry, but it didn't work for me, I did it as you described. can you please see what I'm doing wrong

import QtQuick 2.12
import QtQuick.Window 2.2
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.4
import QtQuick.Controls.Material 2.12


Window {
    
    // вот тут переменные first tochka and dwa tochka
    property int cliced_x0 : 0;
    property int cliced_y0 : 0;
    property int cliced_x1 : 0;
    property int cliced_y1 : 0;
    property var bool_cliced : false;
    
    width: Screen.desktopAvailableWidth/1.6
    //    width: 640
    height: Screen.desktopAvailableHeight/1.6
    x:0
    y:0
    //    height: 480
    visible: true
    title: qsTr("разкройка")
    
    RowLayout {
        id: botnes;
        anchors.horizontalCenter: parent.horizontalCenter
        z: canvas.z+1
        height:50
        anchors.horizontalCenterOffset: 0
        
        
        Button {
            id: button0
            text: qsTr("выкройка")
            display: AbstractButton.IconOnly
            ToolTip.visible: hovered
            ToolTip.text: qsTr("выкройка")
            
            
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: button0.down ? "#ccccff" : "#bde0ff"
                border.color: button0.down ? "#ccccff" : "#bde0ff"
                radius: 2
            }
            
            onClicked: {
                rectangle.visible == true ? rectangle.visible = false : rectangle.visible = true;
            }
        }
        
        Button {
            id: button1
            text: qsTr("линия")
            display: AbstractButton.IconOnly
            ToolTip.visible: hovered
            ToolTip.text: qsTr("линия")
            
            
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: button1.down ? "#ccccff" : "#bde0ff"
                border.color: button1.down ? "#ccccff" : "#bde0ff"
                radius: 2
            }
            
            onClicked: {
                Qt.quit();
            }
        }
        
        Button {
            id: button2
            text: qsTr("точка")
            display: AbstractButton.IconOnly
            ToolTip.visible: hovered
            ToolTip.text: qsTr("точка")
            
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: button2.down ? "#ccccff" : "#bde0ff"
                border.color: button2.down ? "#ccccff" : "#bde0ff"
                radius: 2
            }
            
            onClicked: {
                //   console.log("hello")
            }
        }
        
        
        
        
        Button {
            id: button3
            text: qsTr("радиус")
            display: AbstractButton.IconOnly
            ToolTip.visible: hovered
            ToolTip.text: qsTr("радиус")
            
            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                color: button3.down ? "#ccccff" : "#bde0ff"
                border.color: button3.down ? "#ccccff" : "#bde0ff"
                radius: 2
            }
            
            onClicked: {
                //Qt.quit();
            }
        }
    }
    
    Rectangle {
        id: rectangle
        color: "#89cdf1"
        
        x: parent.width/100;
        y:parent.height/10;
        
        width: parent.width/4
        height: parent.height/1.2
        
        Layout.alignment: Qt.AlignRight
        
        anchors
        {
            leftMargin: 10
            rightMargin: 10
            bottomMargin: 10
        }
        
        
        
        Grid{
            id: gridLayout
            x:0
            y:10;
            width:  parent.width;
            height: parent.height/3>= 120 ? parent.height/3:120;
            
            
            rows: 2
            columns: 2
            //            anchors.centerIn: parent
            columnSpacing: 10
            rowSpacing: 10
            
            Text {
                id:text1
                color: "#00000f"
                
                text: "ширина1:"
                font.family: "Helvetica"
                font.pixelSize: parent.width/10;
            }
            
            // Область с TextInput
            Rectangle {
                id:rectangle2
                //                y: parent.height /100; не работает
                
                Layout.fillWidth: true
                Layout.fillHeight: true
                color: "white"
                width:  parent.width /3;
                height:  parent.height /7;
                
                TextInput {
                    id: textInput3
                    color: "#151515";
                    selectionColor: "green"
                    font.pixelSize: parent.width /5;
                    font.bold: true
                    
                    width: parent.width/3;
                    height:  parent.height /3;
                    
                    maximumLength: 8
                    anchors.centerIn: parent
                    focus: true
                    validator : RegExpValidator { regExp : /[0-9]+\.[0-9]+/ } //ввод только чисел !!
                    
                    anchors.fill: parent
                    cursorVisible : true
                    
                    
                }
            }
            
            Text {
                id:text3
                color: "#00000f"
                
                text: "ширина2:"
                font.family: "Helvetica"
                //                font.pointSize: parent.width/(4*4);
                font.pixelSize: parent.width /10;
                
            }
            
            // Область с TextInput
            Rectangle {
                id:rectangle3
                y:200; // не работает
                x:100; // не работает
                
                Layout.fillWidth: true
                Layout.fillHeight: true
                color: "white"
                width:  parent.width /3;
                height:  parent.height /7; // 10
                
                TextInput {
                    id: textInput4
                    y: 20;
                    color: "#151515";
                    selectionColor: "green"
                    font.pixelSize: parent.width /5;
                    font.bold: true
                    
                    width: parent.width/3;
                    height:  parent.height /3;
                    
                    maximumLength: 8
                    anchors.centerIn: parent
                    focus: true
                    validator : RegExpValidator { regExp : /[0-9]+\.[0-9]+/ } //ввод только чисел !!
                    
                    anchors.fill: parent
                    cursorVisible : true
                    
                }
            }
        }
    }
    
    Canvas {
        id: canvas
        
        x: parent.width/3.4;
        y: parent.height/10;
        
        width: parent.width*0.6;
        height: parent.height*0.9;
        
        
        
        anchors {
            left: parent.left
            right: parent.right
            top: colorTools.bottom
            bottom: parent.bottom
            margins: 8
        }
        property real lastX
        property real lastY
        property color color: colorTools.paintColor
        
        onPaint: {
            
            // работает
            var ctx = getContext('2d')
            ctx.lineWidth = 1.5
            ctx.strokeStyle = canvas.color
            //            ctx.strokeStyle = "blue";
            ctx.beginPath()
            //            ctx.moveTo(lastX, lastY)
            ctx.moveTo(cliced_x0, cliced_y0)
            //            lastX = area.mouseX
            //            lastY = area.mouseY
            //            ctx.lineTo(lastX, lastY)
            ctx.lineTo(cliced_x1, cliced_y1)
            ctx.translate(cliced_x1, cliced_y1)
            ctx.closePath()
            ctx.stroke()
            
        }
        
        MouseArea {
            //работатет
            id: area
            anchors.fill: parent
            // моё
            onClicked: {
                
                if (bool_cliced == false)
                {
                    cliced_x0 = area.mouseX;
                    cliced_y0 = area.mouseY;
                    bool_cliced = true;
                }
                if(bool_cliced == true)
                {
                    cliced_x1 = area.mouseX;
                    cliced_y1 = area.mouseY;
                    bool_cliced = false;
                    canvas.requestPaint()
                }
            }
        }
    }
}

[sierdzio]

Don't know, sorry. The code looks OK to me.

[KroMignon]

@timob256 said in How to draw a line from point A to point B by mouse click:

if (bool_cliced == false)
{
cliced_x0 = area.mouseX;
cliced_y0 = area.mouseY;
bool_cliced = true;
}
if(bool_cliced == true)
{
cliced_x1 = area.mouseX;
cliced_y1 = area.mouseY;
bool_cliced = false;
canvas.requestPaint()
}

I would change this to:

if (bool_cliced == false)
{
    cliced_x0 = area.mouseX;
    cliced_y0 = area.mouseY;
}
else
{
    cliced_x1 = area.mouseX;
    cliced_y1 = area.mouseY;
    canvas.requestPaint()
}
bool_cliced = !bool_cliced;

[J.Hilk]

@KroMignon is right, you're always entering on each mouse click both if statements, as both are always true (currently) use an else there and/or change the bool_cliced only at the end of the scope.

also don't mix anchors with width/height/x/y