4

Qt-QML (デスクトップ用) でシノプティック パネルを設計しようとしています。インターフェイスは固定解像度で使用する必要があるため、さまざまなグラフィック要素 (パイプ、パイプ曲線、パイプ T、ポンプ、バルブなど) を作成するために PNG 画像を使用することを好みます。問題は、さまざまなコンポーネントの塗りつぶしの色を変更する方法です: ユーザーが色を選択できるようにしたいのですが (実際のシナリオでは、使用できる液体が異なります)、QML でそれを行う方法が見つかりません。PNG コンポーネントを背景として使用し、SVG マスクでマスクされた Rectangle を描画することを考えました。私の PNG の上に 1 つの色 (黒と透明) の SVG 画像を配置し、QML でこれの色のプロパティを変更する方法がないかどうか疑問に思っています。誰にもアイデアはありますか？本当にありがとう。

( EDITより良い説明)

問題は私が説明できるよりも複雑です。特定のプロパティを持ついくつかの QML コンポーネントを作成しました。各コンポーネントには透明な背景画像 (PNG) があります。今、私が必要としているのは、メインの QML が特定の状態 (Qt アプリケーションによって設定された状態) にあるときに、可変色「x」を使用して PNG 画像の定義された領域を塗りつぶすことです。私の問題は、QML から PNG/SVG の領域を可変色で塗りつぶす方法ですか? 必要なのは、「背景」画像を配置し、この上に「Rectangle」コンポーネント (色「x」) を適用し、最後にこの Rectangle にマスクを配置して、背景を維持しながら表示する必要がある領域を定義することです (前の下の画像）。私は今自分自身をよりよく説明したことを願っています。

(解決策を編集) 何時間も経った後、qt-components MaskedItem を使用する以外の解決策を見つけることができませんでした。以下に、私が使用したソリューションを投稿しました。興味を持っていただきありがとうございます。

4

3 に答える 3

3

見つかった唯一の解決策は、「qt-componentsMaskedItem 」を使用することです。リポジトリから取得し、Qtデスクトップでコンパイルする必要があります。シノプティックの任意のQMLコンポーネントでMaskedItemを使用できるようになりました。コンポーネントのQMLコードは次のようになります。

Item
{
    id: arrow
    property int  rotate: 0
    property bool active: false
    width: 32
    height: 32
    clip: true

    Image {
        smooth: true
        source: {
            if(rotate==90)
                "../res/arrow_1_bg.png"
            else if(rotate==180)
                "../res/arrow_2_bg.png"
            else if(rotate==270)
                "../res/arrow_3_bg.png"
            else
                "../res/arrow_0_bg.png"
        }
    }

    MaskedItem
    {
        visible: active
        anchors.fill: parent
        mask: Image
        {
            anchors.fill: parent
            smooth: true
            source: {
                if(rotate==90)
                    "../res/arrow_1_mask.png"
                else if(rotate==180)
                    "../res/arrow_2_mask.png"
                else if(rotate==270)
                    "../res/arrow_3_mask.png"
                else
                    "../res/arrow_0_mask.png"
            }
        }
        Rectangle
        {
            anchors.fill: parent
            color: active_color
            opacity: .6
        }
    }

} // Item: arrow

「アクティブ」プロパティは、メインQMLで定義されたグローバルプロパティ「active_color」を使用して、コンポーネントを「塗りつぶす」必要があるかどうかを意味します。

したがって、すべてのコンポーネント（パイプ、パイプの角度、矢印、ポンプ、バルブなど）には、透明度のある背景画像（PNG）があります。パイプ（水平または垂直の「orientation」プロパティを持つ）は、PNG1x32pxでストレッチされます。最終画面の例は次のようになります。

example1http://imageshack.us/a/img9/2968/example1c.png。

すべてのコンポーネントにはMaskedItemもあります。マスク画像は、メインコンポーネントの背景画像の上に配置される長方形（色「x」）の表示領域を定義するために使用されます。2つのコンポーネントの背景画像とマスク画像の例：

example3http://imageshack.us/a/img442/9863/example3y.png。

'active'プロパティがtrueで、選択した色が緑の場合の最終結果は、次のようになります。

example2http://imageshack.us/a/img836/1968/example2c.png。

于 2013-03-06T20:47:05.543 に答える
0

PNG画像とSVG画像はどちらもアルファチャネル（つまり透明度）をサポートしているので、PNG背景の上にSVG（背景を見たい透明部分がある）を置いてみませんか？

またはその逆です...SVG画像の上にPNGパーツ（透明な「穴」がある）を配置することもできます。

于 2013-03-06T08:14:28.580 に答える