如何在不缩放的情况下显示/屏蔽图像的一部分 - QtQuick / QML

Question

我正在尝试用QtQuick制作一个简单的音频表。仪表图形来自PNG文件，当电平发生变化时，我想改变图像显示部分的高度，而不是根据它进行缩放。我只是想在不改变它的情况下屏蔽掉一些图像。

我尝试过以下代码：

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

但这会产生以下不良后果，并会发生某种缩放。我想要在所有3张图片中黄色和绿色相遇的地方相同。

Answer 1

默认情况下，Image组件从上到下填充，但不是将Image包装在外部Item中，而是使用对性能不利的剪辑，只需添加到所有图像项：

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

因此，内容不会缩放并与图像底部对齐。

Answer 2

Image项自上而下填充其内容，因此如果您想将其锚定到底部，则需要一个额外的容器项来剪切图像的顶部：

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

  clip: true  // This is the key

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