Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-73848

QML Canvas draws incorrectly if lineJoin is not set prior to drawing

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: P2: Important P2: Important
    • None
    • 5.12.0
    • Quick: Core Declarative QML
    • None
    • iMac, macOS, Qt 5.12.0
    • macOS

      Unless the 2D context lineJoin is set certain drawing operations where the line drawing steps back on itself e.g. changes direction 180 degrees does not draw properly and the result appears to be incorrect and the incorrect drawing seems to scale with line width.

      Test code...

      import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("QML Pencil Line Bug")
    ////////////////////////////////////////////////////////////////////////////
    Text {
        x: 0
        y: 0
        width: 200
        height: 20
        font.pixelSize: 15
        text: "Does not set strokeStyle"
    }
    Canvas {
        id: canvasDoesnt
        x:0
        y:20
        width: 200
        height: 200
        property int lineWidth: sliderLineWidth.value
        onPaint: {
            var c = getContext('2d')
            c.fillStyle = Qt.rgba(1,1,1,1)
            c.fillRect(0,0,width,height)
            c.fillStyle = Qt.rgba(1,0,0,1)
            c.strokeStyle = '#088'
            c.lineWidth = lineWidth
            c.beginPath()
            c.moveTo(100,100);
            c.lineTo(100,105);
            c.lineTo(100,110);
            c.lineTo(100,105);
            c.stroke()
        }
    }
    ////////////////////////////////////////////////////////////////////////////
    Text {
        x: 200
        y: 0
        width: 200
        height: 20
        font.pixelSize: 15
        text: "Does set strokeStyle"
    }
    Canvas {
        id: canvasDoes
        x: 200
        y: 20
        width: 200
        height: 200
        property int lineWidth: sliderLineWidth.value
        onPaint: {
            var c = getContext('2d')
            c.fillStyle = Qt.rgba(1,1,1,1)
            c.fillRect(0,0,width,height)
            c.fillStyle = Qt.rgba(1,0,0,1)
            c.strokeStyle = '#088'
            c.lineWidth = lineWidth
            // i believe this is the default value
            c.lineJoin = 'miter'
            c.beginPath()
            c.moveTo(100,100);
            c.lineTo(100,105);
            c.lineTo(100,110);
            c.lineTo(100,105);
            c.stroke()
        }
    }
    ////////////////////////////////////////////////////////////////////////////
    Slider {
        id: sliderLineWidth
        x: 0
        y: 220
        height: 30
        width: 400
        from: 1
        to: 30
        value: 10
        orientation: Qt.Horizontal
        onValueChanged: {
            canvasDoesnt.requestPaint()
            canvasDoes.requestPaint()
        }
    }
}

        1. left_is_wrong_right_is_right.png
          248 kB
          Matthew Porth
        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

            qt.team.quick.subscriptions Qt Quick and Widgets Team
            matthew@kuiash Matthew Porth
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:

                There are no open Gerrit changes