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

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

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • P2: Important
    • None
    • 5.12.0
    • None
    • iMac, macOS, Qt 5.12.0
    • macOS

    Description

      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()
              }
          }
      }
      

      Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            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

            Dates

              Created:
              Updated:

              Gerrit Reviews

                There are no open Gerrit changes