Создание продвинутого HUD - PullRequest
Новая
       12

Создание продвинутого HUD

5 голосов
/ 28 мая 2011

Я делаю интерфейс для AR Drone Quadcopter в WPF.

Я добавил кое-что на свой HUD, чтобы сделать его пригодным для использования.

Одним из наиболее продвинутых элементов управления на HUD является искусственный горизонт, который сообщает пилоту текущее выравнивание корабля относительно горизонта.

У меня есть эти 3 PNG

The background

outliner 1

outliner 3

Первое изображение, которое я буду двигать (Текущий шаг корабля) и вращать (Текущий бросок корабля).

Я наложу второе изображение поверх первого, оно будет вращаться только вокруг центральной оси, оно имеет отметки в определенных градусах, что еще больше визуализирует крен корабля.

Последнее, что я положу поверх второго, это изображение просто визуальное улучшение.

Затем я хочу замаскировать первое изображение, чтобы вы могли видеть только то, что находится внутри круга на изображении 2.

И последнее, но не менее важное: я хочу добавить к нему текстовый блок и отобразить текущую высоту

Результат будет выглядеть примерно так

Result

Я знаю, как вращать и перемещать изображение, но как мне разместить изображения друг над другом и как замаскировать первое изображение?

edit: Благодаря Бену я получил это далеко:

Rotate no translate

Но мне также нужно перевести изображение Y в положение (шаг самолета)

With translate

Когда я добавляю преобразование преобразования, я также переводю клип (маску), как я могу перевести изображение, не перемещая маску?

Ответы [ 2 ]

4 голосов
/ 28 мая 2011

Небольшой пример того, как вы можете использовать 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>
0 голосов
/ 30 мая 2011

Я устал вчера вечером: 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>
...