创建高级 HUD

Question

我正在 WPF 中为 AR 无人机四轴飞行器制作一个界面。

我的 HUD 上需要一些东西才能使其可用。

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

我有这 3 个 PNG

我将移动的第一张图像（飞行器的当前俯仰角）并旋转（当前的工艺卷）。

我将把第二个图像放在第一个图像上，这个图像只会绕中心轴旋转，它有一定程度的刻度，这将使飞行器的滚动更加可视化。

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

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

最后但并非最不重要的一点是，我想向其中添加一个文本块并显示当前海拔高度

结果将如下所示

我知道如何旋转和移动图像，但如何将图像放在彼此的顶部，以及如何遮盖第一个图像？

编辑：感谢 Ben，我已经做到了这一点：

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

当我添加平移变换时，我也平移剪辑（蒙版），我该如何平移图像不移动掩模？

Answer 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>

Answer 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>