0

Consider the code below, which allows you to insert successive points represented as black circles onto the canvas. The aim of the code, is to join each successive point by a red line segment.

However, the code gives me a canvas which looks like this

enter image description here

Only the first and second points have been joined by a red segment. None of the other points have been joined by segments. How do I fix that?

Here is the QML code

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window{
    id: root
    width: 640
    height: 480
    visible: true

    Canvas {
        id: mycanvas
        width:  500
        height: 500
        function clear() {
            var ctx = getContext("2d");
            ctx.reset();
            mycanvas.requestPaint();
        }

        Path {
            id: myPath
            startX: 0; startY: 100
            PathLine { x: 400; y: 500 }
        }
        property var arrpoints : []

        onPaint: {
            var context = getContext("2d");

            // Render all the points as small black-circles
            context.strokeStyle = Qt.rgba(0, 1, 1, 0)
            for(var i=0; i < arrpoints.length; i++){
                var point= arrpoints[i]
                context.ellipse(point["x"], point["y"], 10, 10)
            }

            context.fill()
            context.stroke()

            // Join successive points with red segments
            for (var j=1 ; j < arrpoints.length ; j++){
                var start = arrpoints[j-1]
                var end = arrpoints[j]
                context.beginPath();
                context.lineWidth = 2;
                context.moveTo(start["x"], start["y"]);
                context.strokeStyle = "red"
                context.lineTo(end["x"], end["y"]);
            }
            context.stroke();
        }

        MouseArea {
            id: mymouse
            anchors.fill: parent
            onClicked: {
                mycanvas.arrpoints.push({"x": mouseX, "y": mouseY})
                mycanvas.requestPaint()
                console.log( mycanvas.arrpoints )
            }
        }
    }

    Button {
        text: "Clear Points"
        anchors.top : mycanvas.bottom
        onClicked: {
            mycanvas.arrpoints.length = 0
            mycanvas.clear()
            console.log( mycanvas.arrpoints )
        }
    }
}//Window

1 Answer 1

2

According to the documentation:

object ellipse(real x, real y, real w, real h)

Creates an ellipse within the bounding rectangle defined by its top-left corner at (x, y), width w and height h, and adds it to the path as a closed subpath.

The ellipse is composed of a clockwise curve, starting and finishing at zero degrees (the 3 o'clock position).

That is, an ellipse is drawn inscribed in a rectangle determined by the position (x, y) and the size w, h, so we must obtain the topLeft point using the mouse point and the radius.

For lines it is not necessary to make a path for each line, you just have to use a path, and then create the line and move to a next point as shown below:

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window{
    id: root
    width: 640
    height: 480
    visible: true

    Canvas {
        id: mycanvas
        width:  500
        height: 500
        function clear() {
            var ctx = getContext("2d");
            ctx.reset();
            mycanvas.requestPaint();
        }

        Path {
            id: myPath
            startX: 0; startY: 100
            PathLine { x: 400; y: 500 }
        }
        property real radius: 10
        property var arrpoints : []

        onPaint: {
            var context = getContext("2d");
            context.save()
            if(arrpoints.length > 0){
                for(var i=0; i < arrpoints.length; i++){
                    var point= arrpoints[i]
                    context.ellipse(point["x"]-radius, point["y"]-radius, 2*radius, 2*radius)
                }
                context.strokeStyle = Qt.rgba(0, 1, 1, 0)
                context.fill()
                context.stroke()
                context.beginPath()
                var start = arrpoints[0]
                context.moveTo(start["x"], start["y"])
                for(var j=1; j < arrpoints.length; j++){
                    var end= arrpoints[j]
                    context.lineTo(end["x"], end["y"])
                    context.moveTo(end["x"], end["y"])
                }
                context.closePath()
                context.strokeStyle = "red"
                context.lineWidth = 2;
                context.stroke()
            }
            context.restore()
        }

        MouseArea {
            id: mymouse
            anchors.fill: parent
            onClicked: {
                mycanvas.arrpoints.push({"x": mouseX, "y": mouseY})
                mycanvas.requestPaint()
            }
        }
    }

    Button {
        text: "Clear Points"
        anchors.top : mycanvas.bottom
        onClicked: {
            mycanvas.clear()
            console.log( mycanvas.arrpoints )
        }
    }
}//Window

enter image description here

1
  • Thank you! However, I have a question. In the code that you posted, pressing the clear points button does not clear the canvas. Could you tell me why that is? Dec 19, 2017 at 1:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.