Clip an item from the top



  • 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 ?


  • Moderators

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



  • 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.



  • 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.



  • 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
                }
            }
        }
    }
    


  • @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"
                }
            }
        }
    }
    


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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.