Crear un HUD avanzado

Estoy haciendo una interfaz para el Drco Quadcopter AR en WPF.Crear un HUD avanzado

Necesito algunas cosas en mi HUD para hacerlo utilizable.

Uno de los controles más avanzados en el HUD es el horizonte artificial, que le indica al piloto la alineación actual de la nave con el horizonte.

I tienen estos 3 PNGs

The background

outliner 1

outliner 3

La primera imagen moveré (El tono actual de la embarcación) y girar (El rollo actual de la arte).

Pondré la segunda imagen sobre la primera, esta solo girará alrededor del eje central, tiene marcas en ciertos grados que visualizarán aún más el balanceo de la nave.

La última que pondré encima de la segunda, esta imagen solo es un mejorador visual.

entonces quiero enmascarar primera imagen de modo que sólo se ve cuál está dentro del círculo en la imagen 2.

Por último, pero no menos importante, quiero añadir un bloque de texto a ella y mostrar la altitud actual

El resultado se verá algo como esto

Result

sé cómo rotar y mover la imagen, pero ¿cómo puedo colocar las imágenes en la parte superior de uno al otro, y cómo puedo enmascarar la primera imagen?

edición: Gracias a Ben he llegado hasta aquí:

Rotate no translate

Pero también tengo que traducir la posición Y de la imagen (El tono de la aeronave)

With translate

Cuando agrego la transformación de traducción, también traduzco el Clip (Máscara) ¿cómo puedo traducir la imagen sin mover la máscara?

Fuente

2011-05-28 Anders

te molesta compartir el código? :) ¡Gracias! –

Es básicamente el código que ve en mi respuesta debajo de – Anders

Una pequeña muestra de cómo se puede usar DrawingGroups y ClipGeometry dentro de ella.

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

Fuente

2011-05-28 12:03:19 Ben

Cool, entonces last.png es la primera imagen en la capa 0, la que rotaré? ¿Parece que todo girará con ese código? Tendré que probarlo más tarde esta noche ... ¡gracias! – Anders

Sí, en ese DrawingGroup solo hay una imagen ('last.png'). Aplicamos una geometría de recorte (un círculo en este caso) y una transormulación en este grupo. Luego renderizamos las otras dos imágenes en la parte superior de este grupo. (Puede eliminar el DrawingGroup que contiene las dos imágenes si lo desea). Y le sugiero que utilice un enlace en el ángulo de RotateTransorm. – Ben

Sí, lo veo ahora. Eché de menos que estaba en un grupo separado ... Intentaré esto esta noche si encuentro tiempo y te respondo ... ¡Gracias por toda tu ayuda! – Anders

estaba cansada anoche: D Para obtener el fondo de girar y traducir pero no el recorte era sólo para poner el fondo en un subgrupo en el grupo de recorte ... Ahora funciona!

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

Fuente

2011-05-30 09:36:40 Anders

Respuesta

Cuestiones relacionadas