wpf - 创建高级 HUD

Question

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

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

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

我有这 3 个 PNG







我将移动(飞行器的当前俯仰角)和旋转(飞行器的当前滚动)的第一个图像。

我会将第二张图片放在第一张图片上，这张图片只会围绕中心轴旋转，它在一定程度上有刻度，这将更加形象化飞船的滚动。

我将把最后一个放在第二个之上，这个图像只是一个视觉改进。

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

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

结果看起来像这样



我知道如何旋转和移动图像，但如何将图像相互叠加，以及如何 mask 第一张图像？

编辑:感谢本，我已经走到了这一步:



但我还需要平移图像 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>