Cómo rotar, traducir y escalar un objeto de control alrededor de un punto específico en WPF

rotation transform

Question

Tengo un control personalizado, que es un rectángulo con algunos detalles dentro, pero es un rectángulo.

Tengo un punto central (X, Y), que llamo "Centro de gravedad", que "representa" el punto. Esto significa que cuando establezco una nueva posición para el objeto, quiero que este punto esté en la posición establecida. Cuando giro el objeto, necesito que gire alrededor de este punto. Y cuando escalo el objeto, el punto debe permanecer en la posición establecida anteriormente. Solo el tamaño del objeto debe cambiar.

Por ejemplo, para tener una imagen fácil del problema, digamos que tengo un cuadrado 10X10. Establecí el centro de la gravedad en el centro exacto del cuadrado: (5,5). Luego configuro la posición de los objetos a (100, 100). Entonces, el cuadrado estaría en:

(95,95), (105,95), (105,105), (95,105), lo que significa que su centro estaría en la posición deseada.

En caso de que escale el cuadrado con el valor 2, las nuevas posiciones de 4 puntos serían:

(90,90), (110,90), (110,110), (90,110), lo que significa que su centro permanecería en la posición deseada.

En caso de que lo gire 45 grados, rotaría alrededor de su centro con las posiciones:

(92.93,92.93), (107.07,92.93), (107.07,107.07), (92.93,107.07)

¿Cómo es posible hacer esto, con su centro completamente configurable y todo esto se transforma para ser transparente para el programa en WPF? Solo me gustaría establecer la Escala, la Posición, el Ángulo de rotación y el centro para que se dibuje correctamente.

¡Gracias!

Answer 1

Puede establecer el punto central de una transformación en relación con el tamaño del objeto. Si desea rotar alrededor de la esquina superior izquierda del objeto, el valor sería 0, 0 . Para girar alrededor de una ubicación un 10% más allá de la esquina inferior derecha, usaría 1.1, 1.1 .

La propiedad se llama RenderTransformOrigin para RotationTranforms. En Blend, hay un grupo de "Transformar" en las propiedades. Si lo expandes, RenderTransform tiene un conjunto de pestañas. El quinto es el punto central.

Aquí hay un ejemplo de XAML:

<TextBlock Text="TextBlock" RenderTransformOrigin="-0.5,-0.5" Background="#FFA1BBF9" Margin="50" Width="100" Height="100">
    <TextBlock.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="2"/>
            <SkewTransform/>
            <RotateTransform Angle="30"/>
            <TranslateTransform/>
         </TransformGroup>
     </TextBlock.RenderTransform>
</TextBlock>

Answer 2

** rotar cualquier control sobre el origen **

// rotated object
      Rectangle r = new Rectangle();
                r.Fill = Brushes.Blue;
                r.Stroke = Brushes.Yellow;
                r.Width = 200;
                r.Height = 100;      



//rotate transform
 RotateTransform rt = new RotateTransform();

            r.RenderTransform = rt;

            //origin for object
            r.RenderTransformOrigin = new Point(.5,.5);

            DoubleAnimation anim3 = new DoubleAnimation(0, 360, TimeSpan.FromSeconds(.5));
            anim3.RepeatBehavior = RepeatBehavior.Forever;
           rt.BeginAnimation(RotateTransform.AngleProperty, anim3);
  grid1.Children.Add(r);