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

Item はそのImageコンテンツを上から下に埋めるため、下に固定したい場合は、Image の上部を切り取るために追加のコンテナー Item が必要になります。

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 に答える