Question 281168 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I may be met a rendering problem when I used the Canvas of QML to draw a line

I encapsulate a control with canvas. When it get a coordinate array, it can draw the trajectory the array discribed.But during development process，I met a problem and I will simplify the problem in this question.
First ,let us read the code following.

 Canvas {
    anchors.centerIn: parent

    width: 500
    height: 500

    Rectangle {
        anchors.fill: parent
        border.width: 1
        color: "transparent"
    }

    onPaint: {
        var ctx = getContext('2d')
        ctx.lineWidth = 2
        ctx.strokeStyle = "yellow"

        ctx.beginPath()

        ctx.moveTo(100, 100)
        ctx.lineTo(300, 100)

        ctx.moveTo(100, 150)
        ctx.lineTo(300, 150)
        ctx.lineTo(100, 150)
        ctx.lineTo(300, 150)

        ctx.closePath()
        ctx.stroke()
    }
}

The output is:
enter image description here

When I draw along with a line or an arc back and forth, the both ends of the line will automatically draw an extra section.
But the data is large,I can avoid this phenomenon.
So do you konw the solution？Could some one teach me?It is important for me,thanks a lot!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ｉ got an idea,although it is not perfect way but it can meet my needs.Just call the moveTo() the same point after lineTo() .

    Canvas {
    anchors.centerIn: parent

    width: 500
    height: 500

    Rectangle {
        anchors.fill: parent
        border.width: 1
        color: "transparent"
    }

    onPaint: {
        var ctx = getContext('2d')
        ctx.lineWidth = 5
        ctx.strokeStyle = "yellow"

        if (root.coordList.length > 0) {
            var startPoint = root.coordList[0]
            var startX = startPoint[0]
            var startY = startPoint[1]
            ctx.moveTo(startX, startY)
            for (var i = 1; i < root.coordList.length; i++) {
                var point = root.coordList[i]
                var x = point[0]
                var y = point[1]
                ctx.lineTo(x, y)
                ctx.moveTo(x, y)
            }
        }

        ctx.stroke()
    }
}

    When called moveTo(),it means the last line has been over.So the rendering problem will not appear.


  2. 0

    You can close your path before a call to moveTo(). This is somehow just a workaround, I guess:

    Canvas {
    anchors.centerIn: parent

    width: 500
    height: 500

    Rectangle {
        anchors.fill: parent
        border.width: 1
        color: "transparent"
    }

    onPaint: {
        var ctx = getContext('2d')
        ctx.lineWidth = 2
        ctx.strokeStyle = "yellow"

        ctx.beginPath()

        ctx.moveTo(100, 100)
        ctx.lineTo(300, 100)

        // close path 
        ctx.closePath()
        ctx.stroke()

        // start new path
        ctx.beginPath()

        ctx.strokeStyle = "green"

        ctx.moveTo(100, 150)
        ctx.lineTo(300, 150)
        ctx.lineTo(100, 150)
        ctx.lineTo(300, 150)

        ctx.closePath()
        ctx.stroke()
    }
}

    Another workaround is to set the lineWidth below 0.9. This is really strange. Guess, this is a bug.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search