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

Canvas context fails to draw using selected strokeStyle when being assigned to Item property

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: P3: Somewhat important
    • Resolution: Done
    • Affects Version/s: 5.3.1
    • Fix Version/s: 5.12.2, 5.12.3, 5.13.1, 5.14.0 Alpha
    • Labels:
    • Environment:
      Qt Creator 3.1.2 (opensource)
      Based on Qt 5.3.1 (MSVC 2010, 32 bit)

      Built on Jun 23 2014 at 04:13:10

      From revision a791e851a7
    • Commits:
      0148243a77a42de1ba6170a1da3977b3026c1927 (qt/qtdeclarative/5.12)

      Description

      Using Canvas to draw two arc lines and a straight line.
      Trying to use unique color for each line.

      In the following example canvas draws correctly only for the first time.
      Any subsequent paint uses wrong color(s), i.e. the assigned color from the parent Item property is used when stroking every line instead of the selected hardcoded colors !?

      The following does not work as expected:

      import QtQuick 2.0
      
      Item {
          id: theArc
          antialiasing: true
          property int thickness
          property color bgColor
          property color fillColor
      
          property real minimumValue: 0
          property real maximumValue: 100
          property real currentValue: 0
      
          onBgColorChanged:   theCanvas.requestPaint()
          onFillColorChanged: theCanvas.requestPaint()
      
          Timer
          {
              interval: 500
              repeat: true
              running: true
              onTriggered: {
                  var v = currentValue+10
                  if(v > maximumValue )
                      v = minimumValue
                  currentValue = v
              }
          }
      
          Canvas {
              id: theCanvas
      
              anchors.fill: theArc
              antialiasing: true
              renderTarget: Canvas.Image //Very importend for antialiasing!!!
      
              property point center: Qt.point( theCanvas.width/2, theCanvas.height/2 )
              property real  radius: Math.min(theCanvas.width, theCanvas.height)/2 - thickness/2
      
              // percentage of value between min/max as 0 to 1.0
              property real pct: (currentValue - minimumValue) / (maximumValue - minimumValue)
      
              property real startAngle: -1.25*Math.PI
              property real endAngle:    0.25*Math.PI
      
              onPctChanged: theCanvas.requestPaint()
      
              onPaint: {
                  var ctx = theCanvas.getContext("2d");
                  ctx.clearRect(0,0, 2*radius, 2*radius)
      
                  ctx.beginPath();
                  ctx.arc(center.x, center.y, radius,
                          startAngle, endAngle );
                  ctx.lineWidth   = thickness;
                  ctx.strokeStyle = bgColor; // Using property bgColor does only work for the first drawing, using "blue" instead works for any subsequent drawing too !?!?
                  ctx.stroke();
                  ctx.closePath();
      
                  ctx.beginPath();
                  ctx.arc(center.x, center.y, radius,
                          startAngle, startAngle + pct*(endAngle-startAngle) );
                  ctx.lineWidth   = thickness*0.5;
                  ctx.strokeStyle = "red";
                  ctx.stroke();
                  ctx.closePath();
      
                  ctx.beginPath();
                  ctx.moveTo(0,0);
                  ctx.lineTo(2*radius,2*radius);
                  ctx.lineWidth   = thickness*0.5;
                  ctx.strokeStyle = "red"; // either use "blue" above or change this one to "yellow" to get it working again !?!?
                  ctx.stroke();
                  ctx.closePath();
              }
          }
      }
      

      The example works properly if one of the following two changes is applied to this QML snippet :
      Replace named property ref by hardcoded color string

                  ctx.strokeStyle = bgColor; // Using property bgColor does only work for the first drawing, using "blue" instead works for any subsequent drawing too !?!?
      

      by

                  ctx.strokeStyle = "blue"; // Using property bgColor does only work for the first drawing, using "blue" instead works for any subsequent drawing too !?!?
      

      Or replace second used hardcoded color string by another unique named color

                  ctx.strokeStyle = "red"; // either use "blue" above or change this one to "yellow" to get it working again !?!?
      

      by

                  ctx.strokeStyle = "yellow"; // either use "blue" above or change this one to "yellow" to get it working again !?!?
      

        Attachments

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

          Activity

            People

            Assignee:
            andysh Andy Shaw
            Reporter:
            manuelkoch Manuel Koch
            Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Gerrit Reviews

                There are no open Gerrit changes