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. Qt (QML) Dashed Circle
Forum Updated to NodeBB v4.3 + New Features

Qt (QML) Dashed Circle

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
5 Posts 3 Posters 4.4k 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.
  • D Offline
    D Offline
    DYYF
    wrote on 25 Jul 2017, 17:38 last edited by
    #1

    Hello, is there any way to draw half dashed circle in QML? I drawn half circle in this way

    var Circle = getContext("2d");
              Circle.save();
              var CircleGradient = Circle.createLinearGradient(parent.width/4,parent.height,parent.width/4,0);
                      CircleGradient.addColorStop(0, firstGradientPoint);
                      CircleGradient.addColorStop(1, secondGradientPoint);
                      Circle.clearRect(0, 0, parent.width, parent.height);
                      Circle.beginPath();
                      Circle.lineCap = "round";
                      Circle.lineWidth = 10;
                      Circle.strokeStyle = CircleGradient
                      Circle.arc(parent.width/2, parent.height/2, canvas.radius - (Circle.lineWidth / 2), Math.PI/2, canvas.Value);
                      Circle.stroke();
                      Circle.restore();
    

    Result:
    Result

    But how can I make it dashed like this?:alt text

    Thank you!

    P A 2 Replies Last reply 25 Jul 2017, 18:07
    0
    • D DYYF
      25 Jul 2017, 17:38

      Hello, is there any way to draw half dashed circle in QML? I drawn half circle in this way

      var Circle = getContext("2d");
                Circle.save();
                var CircleGradient = Circle.createLinearGradient(parent.width/4,parent.height,parent.width/4,0);
                        CircleGradient.addColorStop(0, firstGradientPoint);
                        CircleGradient.addColorStop(1, secondGradientPoint);
                        Circle.clearRect(0, 0, parent.width, parent.height);
                        Circle.beginPath();
                        Circle.lineCap = "round";
                        Circle.lineWidth = 10;
                        Circle.strokeStyle = CircleGradient
                        Circle.arc(parent.width/2, parent.height/2, canvas.radius - (Circle.lineWidth / 2), Math.PI/2, canvas.Value);
                        Circle.stroke();
                        Circle.restore();
      

      Result:
      Result

      But how can I make it dashed like this?:alt text

      Thank you!

      P Offline
      P Offline
      pra7
      wrote on 25 Jul 2017, 18:07 last edited by pra7
      #2

      @DYYF You can use ctx.setLineDash(segments); to draw a dashed stroke. i your case its Circle.setLineDash(segments); for more information check following link :
      An example of dotted and dashed lines on the canvas tag

      D 1 Reply Last reply 25 Jul 2017, 18:23
      1
      • P pra7
        25 Jul 2017, 18:07

        @DYYF You can use ctx.setLineDash(segments); to draw a dashed stroke. i your case its Circle.setLineDash(segments); for more information check following link :
        An example of dotted and dashed lines on the canvas tag

        D Offline
        D Offline
        DYYF
        wrote on 25 Jul 2017, 18:23 last edited by
        #3

        @pra7 Thank you) I tried to do it. I wrote: Circle.setLineDash([2,3]);
        but it dosen’t work:

        TypeError: Property 'setLineDash' of object [object Object] is not a function
        
        P 1 Reply Last reply 25 Jul 2017, 18:59
        0
        • D DYYF
          25 Jul 2017, 18:23

          @pra7 Thank you) I tried to do it. I wrote: Circle.setLineDash([2,3]);
          but it dosen’t work:

          TypeError: Property 'setLineDash' of object [object Object] is not a function
          
          P Offline
          P Offline
          pra7
          wrote on 25 Jul 2017, 18:59 last edited by
          #4

          @DYYF I thought HTML5 'seLineDash' would have also ported . Refer
          http://doc.qt.io/qt-5/qml-qtquick-context2d.html for more info.

          I think it's not introduced yet in QT.

          1 Reply Last reply
          0
          • D DYYF
            25 Jul 2017, 17:38

            Hello, is there any way to draw half dashed circle in QML? I drawn half circle in this way

            var Circle = getContext("2d");
                      Circle.save();
                      var CircleGradient = Circle.createLinearGradient(parent.width/4,parent.height,parent.width/4,0);
                              CircleGradient.addColorStop(0, firstGradientPoint);
                              CircleGradient.addColorStop(1, secondGradientPoint);
                              Circle.clearRect(0, 0, parent.width, parent.height);
                              Circle.beginPath();
                              Circle.lineCap = "round";
                              Circle.lineWidth = 10;
                              Circle.strokeStyle = CircleGradient
                              Circle.arc(parent.width/2, parent.height/2, canvas.radius - (Circle.lineWidth / 2), Math.PI/2, canvas.Value);
                              Circle.stroke();
                              Circle.restore();
            

            Result:
            Result

            But how can I make it dashed like this?:alt text

            Thank you!

            A Offline
            A Offline
            Arvindhan Ponnusamy
            wrote on 26 Jul 2017, 04:06 last edited by
            #5

            @DYYF : Viewed Similar use case for straight lines.
            https://forum.qt.io/topic/56628/qml-canvas-dashed-dotted-lines

            1 Reply Last reply
            0

            1/5

            25 Jul 2017, 17:38

            • Login

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