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

Qt (QML) Dashed Circle

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
5 Posts 3 Posters 4.6k 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 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 Arvindhan PonnusamyA 2 Replies Last reply
    0
    • D DYYF

      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 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
      1
      • P pra7

        @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 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
        0
        • D DYYF

          @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 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

            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!

            Arvindhan PonnusamyA Offline
            Arvindhan PonnusamyA Offline
            Arvindhan Ponnusamy
            wrote on 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

            • Login

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