wpf - 高度な HUD の作成

Question

WPF で AR Drone Quadcopter のインターフェイスを作成しています。

HUD を使用できるようにするために、HUD に何かが必要です。

HUD のより高度なコントロールの 1 つは、人工水平線です。これは、航空機の現在の水平線への位置合わせをパイロットに伝えます。

私はこれらの3つのPNGを持っています

アウトライナー 1

アウトライナー3

最初の画像は移動 (現在の機体のピッチ) と回転 (現在の機体のロール) です。

最初の画像の上に 2 番目の画像を重ねます。この画像は中心軸を中心に回転するだけで、特定の角度で目盛りがあり、機体の回転をさらに視覚化します。

2 番目の上に配置する最後の 1 つは、この画像は単に視覚的な改善です。

次に、最初の画像をマスクして、画像 2 の円の内側だけが見えるようにします。

最後になりましたが、テキストブロックを追加して、現在の高度を表示したいと思います

結果は次のようになります

画像を回転および移動する方法は知っていますが、画像を互いに重ねるにはどうすればよいですか?また、最初の画像をマスクするにはどうすればよいですか?

編集：ベンのおかげで、私はここまで来ました：

平行移動せずに回転

しかし、画像の Y 位置 (航空機のピッチ) も変換する必要があります。

翻訳あり

変換変換を追加すると、クリップ (マスク) も変換されます。マスクを移動せずに画像を変換するにはどうすればよいですか?

score 4 · Accepted Answer

使用方法とその中の小さなDrawingGroupsサンプルClipGeometry。

<Grid>
  <Image Source="Images\Background.jpg" />

  <Image>
    <Image.Source>
      <DrawingImage>
        <DrawingImage.Drawing>
          <DrawingGroup>
            <DrawingGroup>
              <!-- You can rotate a DrawingGroup -->
              <DrawingGroup.Transform>
                <RotateTransform Angle="-15" CenterX="50" CenterY="50" />
              </DrawingGroup.Transform>

              <ImageDrawing ImageSource="Images\last.png" Rect="0,0,100,100" />
              <DrawingGroup.ClipGeometry>
                <EllipseGeometry Center="50,50" RadiusX="25" RadiusY="25" />
              </DrawingGroup.ClipGeometry>
            </DrawingGroup>

            <DrawingGroup>
              <ImageDrawing ImageSource="Images\middle.png" Rect="0,0,100,100" />
              <ImageDrawing ImageSource="Images\outer.png" Rect="0,0,100,100" />
            </DrawingGroup>
          </DrawingGroup>
        </DrawingImage.Drawing>
      </DrawingImage>
    </Image.Source>
  </Image>
</Grid>

score 0 · Accepted Answer

昨夜は疲れていました :D バックグラウンドを回転させて移動させ、クリッピングを行わないようにするには、サブグループの背景をクリッピンググループに配置するだけでした...今はうまくいきます!

    <Image Width="240" Height="240">
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <DrawingGroup>
                        <DrawingGroup>
                            <DrawingGroup>
                                <DrawingGroup.Transform>
                                    <TransformGroup>
                                        <RotateTransform Angle="-15" CenterX="120" CenterY="120" />
                                        <TranslateTransform Y="-20" />
                                    </TransformGroup>
                                </DrawingGroup.Transform>

                                <ImageDrawing ImageSource="Images\pNxVK.png" Rect="0,0,240,240" />
                            </DrawingGroup>

                            <DrawingGroup.ClipGeometry>
                                <EllipseGeometry Center="120,120" RadiusX="60" RadiusY="60">
                                </EllipseGeometry>
                            </DrawingGroup.ClipGeometry>
                        </DrawingGroup>

                        <DrawingGroup>
                            <ImageDrawing ImageSource="Images\zUr8D.png" Rect="0,0,240,240" />
                            <ImageDrawing ImageSource="Images\XPZW9.png" Rect="0,0,240,240" />
                        </DrawingGroup>
                    </DrawingGroup>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>

wpf - 高度な HUD の作成

2 に答える 2

Related

Reference