1

我正在尝试用 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 幅图像中黄色和绿色相交的位置相同。

仪表尝试

4

2 回答 2

4

Image 组件默认从上到下填充，但不是将 Image 包装在外部 Item 中，并且使用不利于性能的剪辑，只需添加到所有 Image 项目：

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

所以内容不会被缩放并对齐到图像的底部。

于 2013-03-26T14:41:23.357 回答
0

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

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

  clip: true  // This is the key

  Image {
      source: "meter.png"
      anchors.bottom: parent.bottom
  }
}
于 2013-03-06T08:28:14.890 回答