Clip an item from the top

rghvdberg

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)

But as you can see, it looks like the bar is just moving down.
Any way to have it just clip from the top ?

koahnig

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

rghvdberg

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.

GrecKo

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.

KillerSmath

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

rghvdberg

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

rghvdberg

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