none
Transform Polygon RRS feed

  • Pregunta

  • hola cree un  Polygon (en forma de L) en Silverlight y le estoy aplicando los eventos de tecla aplicandole trasformaciones de rotacion y translacion.

     private void UserControl_KeyDown(object sender, KeyEventArgs e)
     {
        TranslateTransform tt = new TranslateTransform();
        RotateTransform rt = new RotateTransform();
        TransformGroup tg = new TransformGroup();
    
          switch (e.Key)
          { 
            case Key.Left:
              f.PosX -= 20;
              break;
            case Key.Right:
              f.PosX += 20;
              break;
            case Key.Down:
              f.PosY += 20;
              break;
            case Key.Up:
              rt.Angle += 90;
              break;
          }
          tt.X = f.PosX;
          tt.Y = f.PosY;
          f.PolygonView.RenderTransform = tg;
     }

    Lo que sucede es que despues de la rotación las coordenadas no se actualizan por ejemplo el pligono esta así:  L  y lo giro 90 grados hacias la derecha queda así  ¬

    luego al tratar de transladarlo nuevamente el abajo ya no es abajo, segurmente es por la transformación de rotación pero no entiendo este proceso alguien que me pueda ayudar a comprender que debo hacer,

     

    gracias un saludo


    "En Busqueda del conocimiento" "DCE Estrella 3" "Practicando el conocimiento"
    martes, 31 de agosto de 2010 3:18

Respuestas

Todas las respuestas

  • ¡Hola!

    Te falta asignar tus variables tt y rt a tg. Las estas creando pero no las vinculas al TransformGroup

    tg.Children.Add(tt);

    tg.Children.Add(rt);

    Un saludo.

    martes, 31 de agosto de 2010 9:04
  • ok yo peque y lo que queria era poner el pedazo de codigo pero no el codigo esta agregandola

     private void UserControl_KeyDown(object sender, KeyEventArgs e)
    {
        TranslateTransform tt = new TranslateTransform();
        RotateTransform rt = new RotateTransform();
        TransformGroup tg = new TransformGroup();
         tg.Childre.Add(tt); tg.Children.Add(rt);

     


          switch (e.Key)
          {
            case Key.Left:
              f.PosX -= 20;
              break;
            case Key.Right:
              f.PosX += 20;
              break;
            case Key.Down:
              f.PosY += 20;
              break;
            case Key.Up:
              rt.Angle += 90;
              break;
          }
          tt.X = f.PosX;
          tt.Y = f.PosY;
          f.PolygonView.RenderTransform = tg;
    }

     

    pero aún sigue sin funcionar

    gracias

     


    "En Busqueda del conocimiento" "DCE Estrella 3" "Practicando el conocimiento"
    martes, 31 de agosto de 2010 14:03
  • ¡Hola!

    Si haces las instancias de tt, rt y tg en el evento cada vez que pulses una tecla estas creando unos nuevos objetos de este tipo en la memoria. Por eso es por lo que la primera vez te funciona pero la siguiente no, ya que son otros objetos.

    Lo que yo haría es lo siguiente:

    1. Creo una función que me devuelve el tg

    2. En el load cargo esta función

    3. Empleo un storyboard que me vincule las propiedades del tg.

    4. En el key llamo a las propiedades del tg a través del storeboard.

    ¿Cómo lo ves?

    Un saludo,

    martes, 31 de agosto de 2010 15:43
  • me podrias ayudar con un ejemplo no entendí muy bien gracias por el feedback


    "En Busqueda del conocimiento" "DCE Estrella 3" "Practicando el conocimiento"
    martes, 31 de agosto de 2010 20:35
  • Echa un vistazo a los siguientes enlaces para profundizar un poco en el tema de las animaciones:

    http://www.codeproject.com/KB/silverlight/AnimationInSilverlight.aspx

    https://www.silverlight.net/learn/quickstarts/animations/

    http://msdn.microsoft.com/es-es/magazine/cc721608.aspx

    Un saludo

     

    P.D.: Fijate sobretodo cómo se crea los storyboard.

    martes, 31 de agosto de 2010 21:45
  •  

    Hola

    No es una animación es una translación o una rotación controlada por usuario

    Gracias


    "En Busqueda del conocimiento" "DCE Estrella 3" "Practicando el conocimiento"
    martes, 31 de agosto de 2010 21:57
  • A ver.... Lo que pasa es que no me da tiempo a hacértelo. Lo he intentado esta tarde en 10 minutos que tenía libre pero me ha sido imposible. Es más largo de lo que a simple vista parece. Si pudiera a lo largo de la semana... En fin,... Pero si hay alguién que lo tiene hecho y te puede ayudar, bien venido sea.

    Tú, el storyboard lo puedes activar cuando pulsas una tecla pasándole a tu traslación o rotación el movimiento (las animaciones están compuestas por traslaciones, escalas, rotaciones,...). Con ello consigues lo que deseas. Tú no deseas mover una imagen por la pantalla (creo, es lo que te he entendido) sino un grid compuesto por dos rectángulos que conforman una L. Ese grid va en un control de usuario con una posición de alto y de izquierda (importante para posicionarlo, trasladarlo y rotarlo). Además, has de conocer el centro del grid para la rotación (será la posición izquierda más la mitad del tamaño del grid renderizado). Es muy importante que controles el tamaño renderizado y la parada y arranque del storyboard (no puedes arrancarlo si no esta previamente terminado).

    Un saludo,

    martes, 31 de agosto de 2010 23:29
  • Lo que aún no me queda claro es si yo puedo reotar y transladar sin un storyboard para que lo pongo, aclaro una vez mas yo no quiero animar, lo que quiero es hacer una funcionalidad key.left que se mueva en su sentido key.right que lo haga en el contrario, key.down que baje key.up que rote

     

    gracias un saludo

    si quieres y puedes pasame el mail y te envio el proyecto y lo miras u


    "En Busqueda del conocimiento" "DCE Estrella 3" "Practicando el conocimiento"
    miércoles, 1 de septiembre de 2010 15:10
  • Hola Felipe.

    El funcionamiento que muestras, es el esperado.

    si alguna vez has trabajado con algun engine 3D donde esto queda muy claro, se puede observar que las transformaciones se heredan, de modo que debes de tenerlas en cuenta para realizar el movimiento esperado.

    Es mas, no es lo mismo añadir una translacion y luego una rotacion que primero rotar y luego trasladar (esto es logico).

    una vez dicho esto, explica que quieres realizar exactamente y te podremos ayudar en como implementarlo de la mejor forma posible.

    PD.- Corsario, no encuentro el post donde querias implemtar un metodo anonimo en VB, no se si ya lo has solucionado, en caso de no ser asi, si quieres puedes indicarme donde esta o abrir uno nuevo.


    Saludos
    David González
    MCP.
    Visita mi Blog en: http://www.dgzornoza.com/
    miércoles, 1 de septiembre de 2010 17:58
  • David, hola gracias lo que quiero hacer es la funcionalidad del juego tetris cuando quiera rotar que rote, cuando quiero transladar que translade. Con poligons tipo: 

     

    LDerecha, LIsquierda, Tees, Eses

    Gracias

     

    un saludo


    "En Busqueda del conocimiento" "DCE Estrella 3" "Practicando el conocimiento"
    miércoles, 1 de septiembre de 2010 19:01
  • ¡Buenos días!

    Inventándo la rueda ;-) : http://www.codeproject.com/KB/silverlight/silverlight_tetris.aspx Yo lo hago constantemente Felipe. Sino te lo puede decir David ;-)

    De todas formas te pongo algo de código: (extraído del libro de Jack Xu. Muy bueno). Estaba leyendo para otro tema (que al final no me ha valido, y me acordé de ti). Sólo te pongo la traslación porque la rotación es similar:

    <Window x:Class="Transformation2D.TranslateTransforms"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Translation Transforms" Height="330" Width="480">
    <Viewbox Stretch="Uniform">
    <Grid Width="525" Height="330" HorizontalAlignment="Left"
    VerticalAlignment="Top" ShowGridLines="True">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="260" />
    <ColumnDefinition Width="260" />
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="0">
    <TextBlock HorizontalAlignment="Center" Margin="10,10,10,0"
    TextWrapping="Wrap" FontSize="14" FontWeight="Bold"
    Text="Translation Animation"/>
    <TextBlock Margin="10,10,10,0" TextWrapping="Wrap"
    Text="The translation properties X and Y
    are animated from -90 to 90."/>
    <Border Margin="10" BorderBrush="Black" BorderThickness="1"
    Background="{StaticResource MyGrayGridBrush}"
    HorizontalAlignment="Left">
    <Canvas ClipToBounds="True" Width="240" Height="250">
    <Rectangle Name="rect" Canvas.Left="100" Canvas.Top="80"
    Width="50" Height="70" Fill="LightCoral"
    Opacity="0.5" Stroke="Black" StrokeThickness="2">
    <Rectangle.RenderTransform>
    <TranslateTransform x:Name="translate"/>
    </Rectangle.RenderTransform>
    </Rectangle>
    <!-- Animate the rectangle: -->
    <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
    <BeginStoryboard>
    <Storyboard RepeatBehavior="Forever"
    AutoReverse="True">
    <DoubleAnimation
    Storyboard.TargetName="translate"
    Storyboard.TargetProperty="X"
    From="-90" To="90" Duration="0:0:5"/>
    <DoubleAnimation
    Storyboard.TargetName="translate"
    Storyboard.TargetProperty="Y"
    From="-90" To="90" Duration="0:0:5"/>
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    </Canvas.Triggers>
    </Canvas>
    </Border>
    </StackPanel>
    <StackPanel Grid.Column="1">
    <TextBlock HorizontalAlignment="Center" Margin="10,10,10,10"
    TextWrapping="Wrap" FontSize="14" FontWeight="Bold"
    Text="Interactive Translation"/>
    <Grid Width="260" Height="26" HorizontalAlignment="Left"
    VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="70" />
    <ColumnDefinition Width="50" />
    <ColumnDefinition Width="70" />
    <ColumnDefinition Width="50" />
    </Grid.ColumnDefinitions>
    <TextBlock Margin="2,2,10,2" TextAlignment="Right" Text="X"/>
    <TextBox Name="tbX" Width="50" Height="20" Grid.Column="1"
    TextAlignment="Center" Text="0"/>
    <TextBlock Margin="2,2,10,2" Grid.Column="2"
    TextAlignment="Right" Text="Y"/>
    <TextBox Name="tbY" Width="50" Height="20" Grid.Column="3"
    TextAlignment="Center" Text="0"/>
    </Grid>
    <Border Margin="10" BorderBrush="Black" BorderThickness="1"
    Background="{StaticResource MyGrayGridBrush}"
    HorizontalAlignment="Left">
    <Canvas ClipToBounds="True" Width="240" Height="250">
    <TextBlock Canvas.Left="90" Canvas.Top="63"
    Text="Original shape"/>
    <Rectangle Canvas.Top="80" Canvas.Left="100"
    Width="50" Height="70" Stroke="Black"
    StrokeThickness="1" StrokeDashArray="3,1"/>
    <Rectangle Name="rect1" Canvas.Top="80" Canvas.Left="100"
    Width="50" Height="70" Fill="LightCoral"
    Opacity="0.5" Stroke="Black" StrokeThickness="2">
    <!-- Set interactive translation: -->
    <Rectangle.RenderTransform>
    <TranslateTransform
    X="{Binding ElementName=tbX,Path=Text}"
    Y="{Binding ElementName=tbY,Path=Text}"/>
    </Rectangle.RenderTransform>
    </Rectangle>
    </Canvas>
    </Border>
    </StackPanel>
    </Grid>
    </Viewbox>
    </Window>
    
    
    

    En este ejemplo la animación (desplazamiento) la realiza de dos formas diferente: primero hace una animación pura (from y to) y luego permite que el usuario marque en dos textbox lo que desea que se mueva el rectángulo (en tu caso sería el grid con los dos rectángulos). Para tu caso sería en vez de introducir el valor en el textbox sería fijarlo a través de tu keypress. Otra diferencia entre la primera opción y la segunda es que controlas la duración ;-)

    Como te he comentado. Ahora ando muy liado (hace ya un año que en la empresa para que trabajaba no entraban pedidos y prescindieron de cuatro de las últimas personas que entraron. La crisis. Una de ellas era yo :-(. Asi que como el mercado esta complicado, y mientras sale algo, ando metiendo muchas horas en un desarrollo personal, y sobretodo aprendiendo. Peleándome con el código), pero en cuanto pueda postearé en mi blog un proyecto con la solución, pero todo a través de código VB.net (por supuesto ;-). Que ya leí el comentario de mi amigo David en otra pregunta del foro). Que siempre a mi me mola más que XAML ;-)

    Por cierto pillín. esta misma pregunta la tienes formulada en el foro en inglés con más código ;-).

    Ahhh, corsariovasco@hotmail.com [OFF TOPIC] Sólo morenas. Es broma... De todas formas es preferible que las consultas (a no ser que sean personales) se realicen por aqui para seguir generando conocimiento ;-).

    Ahora si no te importa me centro en David. Si lo hubiese solucionado te lo hubiera comentado. Y si Yeray me comenta algo al respecto también. Con lo que a mi me encanta sorprenderte... ;-). Te remito el enlace: http://social.msdn.microsoft.com/Forums/es-ES/wpfes/thread/23ab5bc6-efdd-4305-a4bb-cba71703fc06

    Si, pensaba en abrir otra pregunta pero como ya esta en la parte de programación de VB.net... no quiero tener la misma pregunta repetida. Si adelantas en el tema puedes postearlo en tu blog o si eso me comentas y abro una pregunta que estoy deseándo ponerte un 10 ;-). Gracias campeón.

     

    Un saludo,

     

     

     

     

     

    • Propuesto como respuesta David_González jueves, 2 de septiembre de 2010 19:01
    jueves, 2 de septiembre de 2010 11:52
  • Hola presisamente lo que queria evitar era esto, Tetris hay por doquier lo que quiero es llegar a una solución propia, bueno pues voy a chequear estos liks ahora bien como tu lo dices "reinventar la rueda" para mi es mas que esto es aprender  por que si no fuera asi "cómo aprenderiamos?"

    bueno gracias!!!! entodo caso


    "En Busqueda del conocimiento" "DCE Estrella 3" "Practicando el conocimiento"
    jueves, 2 de septiembre de 2010 13:33
  • ¡Hola!

    Lo tienes resuelto aqui: http://eldoctorando.serveblog.net:8080/?p=1046 ;-)

     

    Espero que te sirva. Un saludo,

    • Propuesto como respuesta David_González jueves, 2 de septiembre de 2010 19:01
    • Marcado como respuesta Felipe Sotelo S jueves, 2 de septiembre de 2010 19:08
    jueves, 2 de septiembre de 2010 16:14
  • Un ejemplo interesante Corsario.

    He mirado tu proyecto publicado y es una forma de solucionar el problema de felipe.

    Creo haber entendido por el codigo que se establece el centro de rotacion en la coordenada trasladada (como sabes salir del paso ;)

     


    Saludos
    David González
    MCP.
    Visita mi Blog en: http://www.dgzornoza.com/
    jueves, 2 de septiembre de 2010 19:00
  • Me alegro que te haya gustado. Espero que a Felipe le haya servido.

    Cierto, Se establece el centro de rotacion en la coordenada trasladada. Los grados trasladados se van almacenando en el tag de la página y comprobamos que no pasamos de 360.

    Un abrazo ;-)

    jueves, 2 de septiembre de 2010 20:01
  • Claro!!! que me gusto, muchas gracias corsario personas asi necesitan estos foros, :D aunque no fue con un poligono pienso que al aplicar la logica de pronto funcione ya te estare contando

     

    Saludos


    "En Busqueda del conocimiento" "DCE Estrella 3" "Practicando el conocimiento"
    jueves, 2 de septiembre de 2010 20:08
  • Ok ;-). Si tu poligono esta sobre un grid no tendrás problemas. Todo el movimiento se realiza sobre un grid.
    jueves, 2 de septiembre de 2010 20:48
  • Por que dices que sobre un grid te refieres en este caso al tablero o a un grid que contenga la figura?
    "En Busqueda del conocimiento" "DCE Estrella 3" "Practicando el conocimiento"
    jueves, 2 de septiembre de 2010 20:53
  • ¡Hola!

    Si te fijas en el proyecto. Sobre la MainPage hay un UserControl que contiene un grid. Éste a su vez dos rectángulos. Podría haber realizado los posicionamientos y el movimiento sobre cada uno de los rectángulos, pero he considerado más sencillo hacerlo sobre el UserControl, que tiene la misma dimensión que el Grid. Lo he tomado todo como un bloque. Para trabajar la demostración es más sencillo.

    Si en tu desarrollo lo haces de una manera similar donde tengas un UserControl (o grid) puedes emplear mis posicionamientos. Sino, debes de encontrar (de forma análoga a como yo lo he hecho) estos posicionamientos.  Simplemente es para que se desplace de acuerdo a los ejes y los límites de la figura que tú establezcas con respecto a su contenedor (a lo que has denominado tablero. Mi MainPage).

    Un saludo,

    jueves, 2 de septiembre de 2010 21:08
  • !Gracias muchos Saludos¡
    "En Busqueda del conocimiento" "DCE Estrella 3" "Practicando el conocimiento"
    jueves, 2 de septiembre de 2010 21:11