Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Simple arc
Forum Updated to NodeBB v4.3 + New Features

Simple arc

Scheduled Pinned Locked Moved Solved QML and Qt Quick
10 Posts 4 Posters 2.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    ShaunVW
    wrote on last edited by
    #1

    I am trying to create a simple arc, and I do it as per the example in the documentation, but it seems to be opposite to what I want.

    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Canvas {
               anchors.fill: parent
               contextType: "2d"
               antialiasing: true
               onPaint: {
                   var ctx = getContext("2d");
                   ctx.reset;
                   ctx.beginPath();
                   ctx.strokeStyle = "green";
                   ctx.lineWidth = 5
                   ctx.arc(100, 100, 50, 0, Math.PI/2, true);
                   ctx.stroke();
               }
        }
    }
    

    It should be a quarter of a full circle from 0 to 90 degrees (0 being horizontal right, 90 being vertical up), yet it gives me 270 degrees, from 0 to 270 (270 being vertical down)

    1 Reply Last reply
    0
    • MarkkyboyM Offline
      MarkkyboyM Offline
      Markkyboy
      wrote on last edited by
      #2

      I absolutely struggle with this subject. I've tried to help myself understand how it works but it melts my mind.

      Try this; create a project, call it "SimpleArc", in the 'main.qml' file add these contents;

      import QtQuick 2.9
      import QtQuick.Window 2.2
      import QtQuick.Controls 2.4
      
      Window {
          visible: true
          width: 800
          height: 300
          color: "beige"
          title: qsTr("Simple arc")
      
          Row {
              anchors.centerIn: parent
              spacing: 20
      
              SimpleArc {
                  id: quarter
                  size: 150
                  value: 0.25
                  lineWidth: 5
                  primaryColor: "orange"
                  Text {
                       text: "1/4"
                       anchors.centerIn: parent
                       font.pointSize: 20
                       color: quarter.primaryColor
                   }
              }
              SimpleArc {
                  id: half
                  size: 150
                  value: 0.50
                  lineWidth: 5
                  primaryColor: "red"
                  Text {
                       text: "1/2"
                       anchors.centerIn: parent
                       font.pointSize: 20
                       color: half.primaryColor
                   }
              }
              SimpleArc {
                  id: threeQuarters
                  size: 150
                  value: 0.75
                  lineWidth: 5
                  primaryColor: "green"
                  Text {
                       text: "3/4"
                       anchors.centerIn: parent
                       font.pointSize: 20
                       color: threeQuarters.primaryColor
                   }
              }
              SimpleArc {
                  id: fullCircle
                  size: 150
                  value: 1.0
                  lineWidth: 5
                  primaryColor: "blue"
                  Text {
                       text: "1"
                       anchors.centerIn: parent
                       font.pointSize: 20
                       color: fullCircle.primaryColor
                   }
              }
          }
      }
      

      Create another file and call it "SimpleArc", add the following contents;

      import QtQuick 2.9
      
      Item {
          id: root
      
          property int size: 150
          property real value: 0
          property int lineWidth: 5
      
          property color primaryColor: "green"
      
          width: size
          height: size
      
          onValueChanged: {
              canvas.degree = value * 360;
          }
      
          Canvas {
              id: canvas
              property real degree: 0
      
              anchors.fill: parent
              onPaint: {
                  var ctx = getContext("2d");
      
                  var x = root.width/2;
                  var y = root.height/2;
      
                  var radius = root.size/2 - root.lineWidth
                  var startAngle = (Math.PI/180) * 270;
                  var fullAngle = (Math.PI/180) * (270 + 360);
                  var progressAngle = (Math.PI/180) * (270 + degree);
      
                  ctx.reset()
      
                  ctx.lineCap = 'round';
                  ctx.lineWidth = root.lineWidth;
      
                  ctx.beginPath();
                  ctx.arc(x, y, radius, startAngle, progressAngle);
                  ctx.strokeStyle = root.primaryColor;
                  ctx.stroke();
              }
          }
      }
      
      

      You should now see the following image;

      simple-arcs.JPG

      I found that despite added complexity of another file, I can better understand how canvas/arcs work, hope it helps!

      Don't just sit there standing around, pick up a shovel and sweep up!

      I live by the sea, not in it.

      S 1 Reply Last reply
      2
      • MarkkyboyM Markkyboy

        I absolutely struggle with this subject. I've tried to help myself understand how it works but it melts my mind.

        Try this; create a project, call it "SimpleArc", in the 'main.qml' file add these contents;

        import QtQuick 2.9
        import QtQuick.Window 2.2
        import QtQuick.Controls 2.4
        
        Window {
            visible: true
            width: 800
            height: 300
            color: "beige"
            title: qsTr("Simple arc")
        
            Row {
                anchors.centerIn: parent
                spacing: 20
        
                SimpleArc {
                    id: quarter
                    size: 150
                    value: 0.25
                    lineWidth: 5
                    primaryColor: "orange"
                    Text {
                         text: "1/4"
                         anchors.centerIn: parent
                         font.pointSize: 20
                         color: quarter.primaryColor
                     }
                }
                SimpleArc {
                    id: half
                    size: 150
                    value: 0.50
                    lineWidth: 5
                    primaryColor: "red"
                    Text {
                         text: "1/2"
                         anchors.centerIn: parent
                         font.pointSize: 20
                         color: half.primaryColor
                     }
                }
                SimpleArc {
                    id: threeQuarters
                    size: 150
                    value: 0.75
                    lineWidth: 5
                    primaryColor: "green"
                    Text {
                         text: "3/4"
                         anchors.centerIn: parent
                         font.pointSize: 20
                         color: threeQuarters.primaryColor
                     }
                }
                SimpleArc {
                    id: fullCircle
                    size: 150
                    value: 1.0
                    lineWidth: 5
                    primaryColor: "blue"
                    Text {
                         text: "1"
                         anchors.centerIn: parent
                         font.pointSize: 20
                         color: fullCircle.primaryColor
                     }
                }
            }
        }
        

        Create another file and call it "SimpleArc", add the following contents;

        import QtQuick 2.9
        
        Item {
            id: root
        
            property int size: 150
            property real value: 0
            property int lineWidth: 5
        
            property color primaryColor: "green"
        
            width: size
            height: size
        
            onValueChanged: {
                canvas.degree = value * 360;
            }
        
            Canvas {
                id: canvas
                property real degree: 0
        
                anchors.fill: parent
                onPaint: {
                    var ctx = getContext("2d");
        
                    var x = root.width/2;
                    var y = root.height/2;
        
                    var radius = root.size/2 - root.lineWidth
                    var startAngle = (Math.PI/180) * 270;
                    var fullAngle = (Math.PI/180) * (270 + 360);
                    var progressAngle = (Math.PI/180) * (270 + degree);
        
                    ctx.reset()
        
                    ctx.lineCap = 'round';
                    ctx.lineWidth = root.lineWidth;
        
                    ctx.beginPath();
                    ctx.arc(x, y, radius, startAngle, progressAngle);
                    ctx.strokeStyle = root.primaryColor;
                    ctx.stroke();
                }
            }
        }
        
        

        You should now see the following image;

        simple-arcs.JPG

        I found that despite added complexity of another file, I can better understand how canvas/arcs work, hope it helps!

        S Offline
        S Offline
        ShaunVW
        wrote on last edited by
        #3

        @Markkyboy
        Re: Simple arc

        Thank you for your help. Using your code I believe I have figured it out, although I must agree it isn't very intuitive, and seems doesn't match up with the documentation example.
        So I want to do an anti-clockwise arc. If I take the positive axis as 0 radian, and I want to go anti-clockwise, then I can do the following (0 radian = 4/2 radian)

        ctx.arc(100, 100, 50, (4/2)*Math.PI, (3/2)*Math.PI, true); //0.5 x PI
        ctx.arc(100, 100, 50, (4/2)*Math.PI, (2/2)*Math.PI, true); //1 x PI
        ctx.arc(100, 100, 50, (4/2)*Math.PI, (1/2)*Math.PI, true); //1.5 x PI
        ctx.arc(100, 100, 50, (4/2)*Math.PI, (0/2)*Math.PI, true); //2 x PI
        

        It is as if the circle rotation is calculated clockwise of zero, but you still use those values in how to do the arc.
        Very confusing.

        KroMignonK 2 Replies Last reply
        0
        • S ShaunVW

          @Markkyboy
          Re: Simple arc

          Thank you for your help. Using your code I believe I have figured it out, although I must agree it isn't very intuitive, and seems doesn't match up with the documentation example.
          So I want to do an anti-clockwise arc. If I take the positive axis as 0 radian, and I want to go anti-clockwise, then I can do the following (0 radian = 4/2 radian)

          ctx.arc(100, 100, 50, (4/2)*Math.PI, (3/2)*Math.PI, true); //0.5 x PI
          ctx.arc(100, 100, 50, (4/2)*Math.PI, (2/2)*Math.PI, true); //1 x PI
          ctx.arc(100, 100, 50, (4/2)*Math.PI, (1/2)*Math.PI, true); //1.5 x PI
          ctx.arc(100, 100, 50, (4/2)*Math.PI, (0/2)*Math.PI, true); //2 x PI
          

          It is as if the circle rotation is calculated clockwise of zero, but you still use those values in how to do the arc.
          Very confusing.

          KroMignonK Offline
          KroMignonK Offline
          KroMignon
          wrote on last edited by
          #4
          This post is deleted!
          1 Reply Last reply
          0
          • S ShaunVW

            @Markkyboy
            Re: Simple arc

            Thank you for your help. Using your code I believe I have figured it out, although I must agree it isn't very intuitive, and seems doesn't match up with the documentation example.
            So I want to do an anti-clockwise arc. If I take the positive axis as 0 radian, and I want to go anti-clockwise, then I can do the following (0 radian = 4/2 radian)

            ctx.arc(100, 100, 50, (4/2)*Math.PI, (3/2)*Math.PI, true); //0.5 x PI
            ctx.arc(100, 100, 50, (4/2)*Math.PI, (2/2)*Math.PI, true); //1 x PI
            ctx.arc(100, 100, 50, (4/2)*Math.PI, (1/2)*Math.PI, true); //1.5 x PI
            ctx.arc(100, 100, 50, (4/2)*Math.PI, (0/2)*Math.PI, true); //2 x PI
            

            It is as if the circle rotation is calculated clockwise of zero, but you still use those values in how to do the arc.
            Very confusing.

            KroMignonK Offline
            KroMignonK Offline
            KroMignon
            wrote on last edited by
            #5

            @ShaunVW said in Simple arc:

            It is as if the circle rotation is calculated clockwise of zero, but you still use those values in how to do the arc.
            Very confusing.

            It is not so confusing, simply read the documentation: https://doc.qt.io/qt-5/qml-qtquick-context2d.html#arc-method

            You can select if you want clockwise or anti-clockwise rotation!

            S 1 Reply Last reply
            2
            • KroMignonK KroMignon

              @ShaunVW said in Simple arc:

              It is as if the circle rotation is calculated clockwise of zero, but you still use those values in how to do the arc.
              Very confusing.

              It is not so confusing, simply read the documentation: https://doc.qt.io/qt-5/qml-qtquick-context2d.html#arc-method

              You can select if you want clockwise or anti-clockwise rotation!

              S Offline
              S Offline
              ShaunVW
              wrote on last edited by
              #6

              @KroMignon
              As mentioned in my question, I did read the documentation.
              Telling me it isn't confusing, and just to read the documentation doesn't then make it not confusing. Or else I wouldn't mention "as per the documentation", and then say that what I was getting was different to what the documentation was saying. Sorry if I sound snarky.
              The documentation shows an arc being drawn anti-clockwise (-> true for last parameter), with the first 1/4 being 1/2Pi, the semi-circle being Pi, the 3/4 arc being 3Pi/2 and the full circle being 2Pi. This is in the figure given in the documentation.

              So obviously I am missing something that the documentation says, and what I am doing.
              I gave an example of the code I was using and what I was getting vs what expecting.
              If you can explain why the difference, I would really appreciate it

              KroMignonK 1 Reply Last reply
              0
              • S ShaunVW

                @KroMignon
                As mentioned in my question, I did read the documentation.
                Telling me it isn't confusing, and just to read the documentation doesn't then make it not confusing. Or else I wouldn't mention "as per the documentation", and then say that what I was getting was different to what the documentation was saying. Sorry if I sound snarky.
                The documentation shows an arc being drawn anti-clockwise (-> true for last parameter), with the first 1/4 being 1/2Pi, the semi-circle being Pi, the 3/4 arc being 3Pi/2 and the full circle being 2Pi. This is in the figure given in the documentation.

                So obviously I am missing something that the documentation says, and what I am doing.
                I gave an example of the code I was using and what I was getting vs what expecting.
                If you can explain why the difference, I would really appreciate it

                KroMignonK Offline
                KroMignonK Offline
                KroMignon
                wrote on last edited by
                #7

                @ShaunVW said in Simple arc:

                If you can explain why the difference, I would really appreciate it

                Ok, Qt documentation is not 100% clear, but you can take a look at the W3C ;) (https://www.w3.org/TR/2dcontext/#dom-context-2d-arc)
                To summarize:

                • startAngle and endAngle are given in Radians and clockwise
                • the anticlockwise parameter defines in which direction the arc will be draw
                • and yes, the Qt documentation is not really clear!

                Another thing you should take care:

                3/2 ==> 1 // integer operation
                3/2.0 ==> 1.5 // float/double operation
                
                1 Reply Last reply
                3
                • S Offline
                  S Offline
                  ShaunVW
                  wrote on last edited by
                  #8
                  measured in radians clockwise from the positive x-axis
                  

                  Thank you for you help, that link has this wording which fits in with the only way I could understand it.
                  PI makes the operation a floating point, but good reminder about the integer division, something to keep track of.

                  KroMignonK 1 Reply Last reply
                  0
                  • S ShaunVW
                    measured in radians clockwise from the positive x-axis
                    

                    Thank you for you help, that link has this wording which fits in with the only way I could understand it.
                    PI makes the operation a floating point, but good reminder about the integer division, something to keep track of.

                    KroMignonK Offline
                    KroMignonK Offline
                    KroMignon
                    wrote on last edited by
                    #9

                    @ShaunVW said in Simple arc:

                    PI makes the operation a floating point,

                    Yes, that's true but:

                    (1/2)*Math.PI = 0
                    MathPI / 2 =  1.57079.....
                    
                    1 Reply Last reply
                    0
                    • J Offline
                      J Offline
                      jay1
                      wrote on last edited by jay1
                      #10

                      The Qt documentation refers to [https://www.w3.org/TR/2dcontext/#dom-context-2d-arc](link url)

                      Drawing the arc is understood as tracing the path along the circumference of a circle. The angles representation is fixed but the direction used to trace the circumference to reach the end angle makes the difference. Refer the below image.

                      Arc.png

                      Clockwise direction to reach 90 degrees has smaller arc.
                      Counterclockwise direction to reach 90 degrees has larger arc.

                      It's all about the path chosen to reach the end angle from start angle.

                      1 Reply Last reply
                      1

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved