Geek Answers Handbook

Creating an Advanced HUD

I am making an interface for AR Drone Quadcopter in WPF.

I use some things on my HUD to make them usable.

One of the most advanced controls on the HUD is the artificial horizon, which informs the pilot about the current alignment of the ship to the horizon.

I have these 3 PNG

The background

outliner 1

outliner 3

The first image I will move (Current ship step) and rotate (Current ship roll).

I will put the second image above the first, it will only rotate around the central axis, it has ticks in certain degrees, which further visualize the craft’s roll.

The last one that I will put on top of the second, this image is just a visual improver.

Then I want to hide the first image so that you only see what's inside the circle in image 2.

, :

.

Result

, , ?

edit: :

Rotate no translate

Y ( )

With translate

, Clip (Mask), , ?

+5
2

, 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>
+4

: D , Clipping, ... !

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

More articles:


All Articles