CODEWITHSUNDEEP
qtaudioqmlqt-quickqtquick2
oggmonster
oggmonster

Reputation: 4872

How to display/mask part of an Image without scaling - QtQuick/QML

I'm trying to make a simple audio meter with QtQuick. The meter graphic comes from a PNG file, and when the level changes, I want to change the height of the displayed part of the image, without scaling it at all. I simply want to mask some of the image off without changing it.

I have tried the following code:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 482
    Image {
        x: 165
        source: "meter.png"
        fillMode: Image.Pad
        anchors.bottom: parent.bottom
        height: 482
    }
    Image {
        x: 175
        source: "meter.png"
        fillMode: Image.Pad
        anchors.bottom: parent.bottom
        height: 440
    }
    Image {
        x: 185
        source: "meter.png"
        fillMode: Image.Pad
        anchors.bottom: parent.bottom
        height: 400
    }
}

But this gives the following undesried results, with some kind of scaling happening. I want where the yellow and green meet in all 3 images to be identical.

Meter attempt

Upvotes: 1

Views: 2526

Answers (2)

TheBootroo
TheBootroo

Reputation: 7518

The Image component fills from top to bottom by default, but instead of wrapping Image in an outer Item, and using clip which is bad for performance, just add to all your Image items :

width: sourceSize.width; // to be sure the width is the exact same as the source
verticalAlignment: Image.AlignBottom; // to force image to start from the bottom

So the content will not be scaled and aligned to the bottom of your Image.

Upvotes: 4

TheHuge_
TheHuge_

Reputation: 1039

The Image Item fills its content top-down, so if you want to anchor it to the bottom you will need an additional container Item to clip out the Image's top portion:

Item {
  x: 165
  width: childrenRect.width
  height: 482

  clip: true  // This is the key

  Image {
      source: "meter.png"
      anchors.bottom: parent.bottom
  }
}

Upvotes: 0

Related Questions