创建高级 HUD答案

【问题标题】：Creating an advanced HUD创建高级 HUD
【发布时间】：2011-09-03 22:01:38
【问题描述】：

我正在 WPF 中为 AR Drone Quadcopter 制作界面。

我需要在我的 HUD 上添加一些东西以使其可用。

HUD 上更高级的控件之一是人工地平线，它告诉飞行员飞行器当前与地平线的对齐情况。

我有这 3 个 PNG

我将移动（飞行器当前的俯仰角）和旋转（飞行器的当前滚动）的第一张图像。

我会将第二张图片放在第一张上，这张只会围绕中心轴旋转，它有一定程度的刻度，可以更直观地看到飞船的滚动。

最后一张我会放在第二张上面，这张图片只是视觉上的改进。

然后我想屏蔽第一张图片，以便您只能看到图片 2 中圆圈内的内容。

最后但同样重要的是，我想在其中添加一个文本块并显示当前高度

结果会是这样的

我知道如何旋转和移动图像，但是如何将图像叠放在一起，以及如何遮盖第一张图像？

编辑：感谢 Ben，我已经走到了这一步：

但我还需要翻译图像 Y 位置（飞机的俯仰）

当我添加翻译变换时，我还翻译剪辑（蒙版）如何在不移动蒙版的情况下翻译图像？

【问题讨论】：

您介意分享代码吗？ :) 谢谢！
它基本上是您在下面我的答案中看到的代码

标签： wpf hud

【解决方案1】：

一个小示例，说明如何在其中使用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>

【讨论】：

酷，所以 last.png 是第 0 层的第一个图像，我将旋转的那个？看起来整个事情都会随着该代码旋转？今晚晚些时候必须试一试..谢谢！
是的，在那个绘图组中只有一个图像（'last.png'）。我们在这个组上应用一个剪裁几何（在这种情况下是一个圆）和一个transorm。然后我们在这个组的顶部渲染另外两个图像。（如果需要，您可以删除包含两个图像的 DrawingGroup。）我建议您应该在 RotateTransorm 的角度上使用绑定。
是的，我现在看到了。我错过了它是在一个单独的组中。如果我有时间并回复你，今晚会试试这个。谢谢你的帮助！
效果很好，一定会喜欢 WPF :D 但有一个问题.. 我还需要翻译 BG.. 但是我还要翻译面具，无论如何要解决这个问题？
对不起，我不太明白。

【解决方案2】：

昨晚我累了 :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>

【讨论】：