Zeroing the Center of a CompositeTransform

Sometimes, it is useful to convert a transformation with a non-zero center point to an equivalent transformation with a zero center point. If you find you have a need for this, then maybe this post will be helpful.

Posts in this series:

• Zeroing the Center of a CompositeTransform
• Flattening a TransformGroup
• Using Matrices to Flatten a TransformGroup
• PanView - A Metro Panning Custom Control
• PanView - The Design

Consider this diagram:

In the above drawing, the green rectangle is translated Tx=80, Ty=60, and rotated R=40° about the center Cx=100, and Cy=30. The goal of this post is to come up with an equivalent transformation with a center point of Cx=0, Cy=0.

The first step is to apply only the translation of Tx=80, Ty=60 and see where that gets us. The result of that is the blue rectangle.

The next step is to apply the rotation of R=40° about the center at Cx=0, Cy=0. The result of that is the red rectangle.

Our last step is to adjust the translation of Tx and Ty to move point B to point G. That is, if we know Bx, By, Gx, and Gy then the new translation is:

• \( Tx = 80 + Gx – Bx \)
• \( Ty = 80 + Gy – By \)

This will require a bit of trigonometry.

Point C is the center point of the rotation of the blue and green rectangles. The distance from C to B is the same as the distance from C to G. That is, the distance CB = CG. For simplicity, we will call this distance d. Clearly:

• \( d = \sqrt{Cx^2 + Cy^2} \)

Now let’s imagine point C is at 0,0 (but let’s keep the original values of Cx=100 and Cy=30 for the rest of the calculations). If that is the case, then:

• \( Bx = -Cx \)
• \( By = -Cy \)
• \( Gx = \cos(g).d \)
• \( Gy = \sin(g).d \)

Once we determine the angles b and g, we are done. Determining the first angle b is easy:

• \( b = \text{atan2}(-Cy,-Cx) \)

The second angle g is even easier:

• g = b + R.

So let’s work this problem through:

• \( d = \sqrt{Cx^2 + Cy^2} = \sqrt{100^2 + 30^2} = 104.4 \)
• \( b = \text{atan2}(-Cy,-Cx) = \text{atan2}(-30,-100) = -163.3° \)
• \( g = b + R = -163.3° + 40° = -123.3° \)
• \(Bx = -Cx = -100 \)
• \( By = -Cy = -30 \)
• \(Gx = Cos(g) * d = \cos(-123.3°) * 104.4 = -57.3\)
• \(Gy = Sin(g) * d = \sin(-123.3°) * 104.4 = -87.3\)
• \(Tx = Tx + Gx -Bx = 80 + (-57.3) - (-100) = 122.7\)
• \(Ty = Ty + Gy -By = 60 + (-87.3) - (-30) = 2.7\)

Here is an overlay of the before (green) and after (blue) transformations:

Here is the XAML that overlays both transformations:

ZeroCtrPtExample.xaml

<Page
				    x:Class="PanViewDemoApp.ZeroCtrPtExample"
				    IsTabStop="false"
				    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
				    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
				    xmlns:local="using:PanViewDemoApp"
				    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
				    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
				    mc:Ignorable="d"
				    FontSize="16">
				    <Canvas>
				        <Border
				            Height="120"
				            Width="200"
				            Background="LightGreen">
				            <Border.RenderTransform>
				                <CompositeTransform
				                    x:Name="M"
				                    TranslateX="80"
				                    TranslateY="60"
				                    Rotation="40"
				                    CenterX="100"
				                    CenterY="30" />
				            </Border.RenderTransform>
				            <TextBlock
				                Margin="3"
				                Foreground="Green">Tx=80 Ty=60<LineBreak />
                                R=40<LineBreak />Cx=100 Cy=30</TextBlock>
				        </Border>
				        <Border
				            Height="120"
				            Width="200"
				            BorderThickness="3"
				            BorderBrush="Blue">
				            <Border.RenderTransform>
				                <CompositeTransform
				                    x:Name="N"
				                    TranslateX="122.7"
				                    TranslateY="2.7"
				                    Rotation="40" />
				            </Border.RenderTransform>
				            <TextBlock
				                VerticalAlignment="Bottom"
				                Foreground="Blue"
				                Margin="3">Tx=122.7 Ty=2.7<LineBreak />
                                R=40<LineBreak />Cx=0 Cy=0</TextBlock>
				        </Border>
				    </Canvas>
				</Page>

Here is some C# code that performs the zeroing of the center point of a transformation:

TransformExtensions.cs

static void InternalZeroCenterPoint(ICompositeTransform t)
				{
				    var d = Math.Sqrt(t.CenterX * t.CenterX + t.CenterY * t.CenterY);
				    var b = Math.Atan2(-t.CenterY, -t.CenterX);
				    var g = b + t.Rotation * Math.PI / 180;
				    var Bx = -t.CenterX;
				    var By = -t.CenterY;
				    var Gx = Math.Cos(g) * d;
				    var Gy = Math.Sin(g) * d;
				    t.TranslateX += Gx - Bx;
				    t.TranslateY += Gy - By;
				    t.CenterX = 0;
				    t.CenterY = 0;
				}