Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct


    Qt World Summit: Early-Bird Tickets

    Solved Clip an item from the top

    QML and Qt Quick
    4
    7
    1054
    Loading More Posts
    • 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.
    • R
      rghvdberg last edited by

      Hi all, I need some help with clipping.
      I'm making a volume meter and I want to clip the coloured bar from the top
      Here's what I have now. (hooked the slider value to the volume meter for now, just to test)
      0_1531051600719_clip_gone_wrong.gif
      But as you can see, it looks like the bar is just moving down.
      Any way to have it just clip from the top ?

      K 1 Reply Last reply Reply Quote 0
      • K
        koahnig @rghvdberg last edited by

        @rghvdberg

        Hi and welcome to devnet forum

        If I understand correctly, you like to have the colors staying in position and not moving.

        Can't you simply reverse the issue and pull a darkgrey bar as the background over the other bar with the colors?

        Vote the answer(s) that helped you to solve your issue(s)

        1 Reply Last reply Reply Quote 2
        • R
          rghvdberg last edited by

          I'm implementing a design where all elements have (partial) opacity.
          So the bar really has to be clipped from top to let other (background) elements pass through
          .
          I've noticed that Canvas with context2d has clipping. Maybe that works. But that's a lot more cumbersome.

          1 Reply Last reply Reply Quote 0
          • GrecKo
            GrecKo Qt Champions 2018 last edited by

            Replace your coloured bar with a parent Item wrapping the bar, add clip: true to the Item and correctly position the bar in the item : anchors.bottom: parent.bottom if you are only changing the height of the item.

            R 1 Reply Last reply Reply Quote 3
            • KillerSmath
              KillerSmath last edited by

              I thought in a crazy and different approach:

              • Use a layer effect to apply a opacity mask in your gange rect.
              • Control the Y level of your mask using the Y level of Control Rect

              Below is a snippet code of how it could work:

              import QtGraphicalEffects 1.0
              
              Rectangle{
                  id: outRect
                  width: 50
                  height: 200
                  color: "#ff00ff"
                  
                  // Control settings
                  Rectangle{
                      id: controlRect
                      width: parent.width
                      height: 2
                      color: "black"
                      z: parent.z+1
                  }
                  
                  MouseArea {
                      anchors.fill: parent
                      drag.target: controlRect
                      drag.axis: Drag.YAxis
                      drag.minimumY: 0
                      drag.maximumY: outRect.height-controlRect.height
                      drag.smoothed: false
                  }
                  
                  // Colored Rects
                  Rectangle{
                      id: coloredRect1
                      width: parent.width
                      height: parent.height/2
                      color: "pink"
                      anchors.top: outRect.top
                  }
                  
                  Rectangle{
                      id: coloredRect2
                      width: parent.width
                      height: parent.height/2
                      color: "red"
                      anchors.top: coloredRect1.bottom
                  }
                  
                  // Layer Settings
                  layer.enabled: true
                  layer.effect: OpacityMask {
                      maskSource: Item{
                          width: outRect.width
                          height: outRect.height
                          Rectangle {
                              width: outRect.width
                              height: outRect.height
                              y: controlRect.y
                          }
                      }
                  }
              }
              

              @Computer Science Student - Brazil
              Web Developer and Researcher
              “Sometimes it’s the people no one imagines anything of who do the things that no one can imagine.” - Alan Turing

              1 Reply Last reply Reply Quote 0
              • R
                rghvdberg @GrecKo last edited by

                @GrecKo , I think I've already tried that, but I'm probably overlooking something

                This is my code

                // VolumeMeter.qml
                import QtQuick 2.0
                
                Item {
                    id: root
                    width: 18
                    height: 89
                    property real volume : 87
                    //  clip: true
                    Item{
                        id: volumeLeft
                        width:9
                        height: root.height
                        clip: true
                        Rectangle
                        {
                            id: frameLeft
                            width:10
                            height:89
                            color: Qt.rgba(0,0,0,.07)
                            border.color: Qt.rgba(0, 0, 0, 0.4)
                        }
                        Item{
                            id: clipL
                            width:frameLeft.width- 2
                            height: root.volume
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: 1
                            anchors.horizontalCenter: parent.horizontalCenter
                            clip: true
                            ColorBar{} // 
                
                        }
                    }
                

                and I do the same for the right volume meter

                Code for the ColorBar{}
                here's ColorBar

                // ColorBar.qml
                import QtQuick 2.0
                
                Item
                {
                    id: root
                    width: 8
                    height: 87
                    anchors.horizontalCenter: parent.horizontalCenter
                    
                    Rectangle {
                        id: orange
                        width: 8
                        height: 32
                        color: "#da691a"
                        border.width: 0
                    }
                    Rectangle {
                        id: yellow
                        width: 8
                        height: 8
                        color: "#f3d444"
                        anchors.top: orange.bottom
                        anchors.topMargin: 0
                    }
                    
                    Rectangle
                    {
                        id: green
                        width: 8
                        height: 47
                        anchors.top: yellow.bottom
                        anchors.topMargin: 0
                        border.width: 0
                        gradient: Gradient {
                            GradientStop {
                                position: 0
                                color: "#0AC48C"
                            }
                            
                            GradientStop {
                                position: 1
                                color: "#07835E"
                            }
                        }
                    }
                }
                
                1 Reply Last reply Reply Quote 0
                • R
                  rghvdberg last edited by

                  @GrecKo you were right (of course) !
                  anchors.bottom: parent.bottom in the ColorBar.qml root item solved it !
                  woohoo
                  thanks so much !!0_1531127921894_clip_gone_right.gif

                  1 Reply Last reply Reply Quote 2
                  • First post
                    Last post