Unrotate final path of path that has multiple translates and rotations - wpf

Question

I'm working in WPF, but SVG would probably be the same so I've tagged it. I have some paths that I am rotating/translating multiple times and in it's final rendered position, I would like to take the path and "unrotate" at that position. The issue is that I can't find the right CenterX/CenterY for this (renderTransformOrigin="0.5, 0.5" doesn't work because the final rendered path has been translated). Finding the boundingbox of the final rendered shape also doesn't not work to rotate it back.
Here's what the non-rotated paths look like:
And here's what they look like when rotated:
To get this, here's my XAML.
<Canvas>
<Rectangle Fill="DarkGray" Opacity=".3" Canvas.Left="168.48" Width="100.08" Height="200.16" Canvas.Top="164.88"/>
<!-- ////////////////// -->
<!-- ///shape/// -->
<Path Stroke="Purple" x:Name="purpleShape" Data="M0,150 25,150 25,0 75,0 75,150 100,150 50,200 Z" StrokeThickness="2">
<Path.RenderTransform >
<TransformGroup>
<!--shape transforms-->
<RotateTransform Angle="30" CenterX="50" CenterY="100"/>
<TranslateTransform X="46.08" Y="0"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<!-- ///childGroup/// -->
<!-- ///childGroup.shape/// -->
<Path Stroke="Green" x:Name="greenShape" Data="M0,25 150,25 150,0 200,50 150,100 150,75 0,75 Z" StrokeThickness="2">
<Path.RenderTransform >
<TransformGroup>
<!--shape transforms-->
<RotateTransform Angle="330" CenterX="100" CenterY="50"/>
<TranslateTransform X="50" Y="200" />
<!--childgroup transforms-->
<RotateTransform Angle="60" CenterX="150" CenterY="150"/>
<TranslateTransform X="0" Y="96.46" />
</TransformGroup>
</Path.RenderTransform>
</Path>
<!-- ///childGroup.shape/// -->
<Path Stroke="Red" x:Name="redShape" Data="M0,150 25,150 25,0 75,0 75,150 100,150 50,200 Z " StrokeThickness="2">
<Path.RenderTransform >
<TransformGroup>
<!--shape transforms-->
<RotateTransform Angle="330" CenterX="50" CenterY="100"/>
<TranslateTransform X="150" Y="0" />
<!--childgroup transforms-->
<RotateTransform Angle="60" CenterX="150" CenterY="150"/>
<TranslateTransform X="0" Y="96.46"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Canvas>
Notice in this code <Rectangle Fill="DarkGray" .... as the first element. This is where I am hoping to "unrotate" the red path to, so that it fits in this bounding box (the size of this is the size of the non-rotated bounding box).
Here's what this looks like:
The final render path of the red shape is: Data="M150,283.064 171.651,295.564 246.651,165.66 289.952,190.66 214.952,320.564 236.603,333.064 168.301,351.365 Z " and now I want to unrotate that (-30 degrees) so that it is pointing down again - again, at this same exact location. (again, getting the bounding box of the red shape doesn't work as it has a different center x/y than I need in order to unrotate).
So using another shape (orange shape) and the path data above, I place it on the red shape and try to rotate it back (i.e. so it doesn't appear rotated).
<Path RenderTransformOrigin="0.5,0.5" Stroke="Orange" x:Name="unrotatedShape" Data="M150,283.064 171.651,295.564 246.651,165.66 289.952,190.66 214.952,320.564 236.603,333.064 168.301,351.365 Z " StrokeThickness="4">
<Path.RenderTransform >
<TransformGroup>
<RotateTransform Angle="-30" CenterX="0.5" CenterY="0.5"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
And this is the result:
This is obviously getting rotated from the path as it is both rotated and translated (e.g. Data="M150,283.064...). It's that 150,283.064 that are causing the issue.
So I'm asking for solutions that allow me to "unrotate" the "red shape" (the rendering of which is the "orange shape") at the same position so that it looks like the following (blue shape).

Answer 1

Caveat
Your grey rectangle is not the same size as the red arrow. I'll place the center of the red arrow on the center of the grey box.
Setup
Rotating around some point, P, is equivalent to translating P to the origin, rotating around the origin, and then translating the origin back to P again.
Define a function which does that, and check how it modifies the individual coordinates. (Below is Mathematica.)
In[1] :=
RotateVAroundP[V_, \[Theta]_, Px_, Py_] := {{Cos[\[Theta]], -Sin[\[Theta]]}, {Sin[\[Theta]], Cos[\[Theta]]}} . (V - {{Px}, {Py}}) + {{Px}, {Py}}
MatrixForm[Simplify[RotateVAroundP[{{x}, {y}}, \[Theta], Px, Py]]]
Out[2]//MatrixForm =
MatrixForm[{{Px + (-Px + x)*Cos[\[Theta]] + (Py - y)*Sin[\[Theta]]}, {Py + (-Py + y)*Cos[\[Theta]] + (-Px + x)*Sin[\[Theta]]}}]
Testing
Rotate the point (1,0), 90 degrees around the point (1,1) to (2,1).
In[3] :=
MatrixForm[RotateVAroundP[{{1}, {0}}, 90*Degree, 1, 1]]
Out[3]//MatrixForm =
MatrixForm[{{2}, {1}}]
Solving
Start with the center of the original red arrow: V1 = (50, 100). Apply all the transformations. The final transformation has the desired -30 degrees, around an unknown point (x,y). This final rotation needs to place the center of the arrow on the center of the box, which is (168.48 + 100.08/2, 164.88 + 200.16/2).
In[5] :=
V1 = {{50}, {100}};
V2 = RotateVAroundP[V1, 330*Degree, 50, 100];
V3 = V2 + {{150}, {0}};
V4 = RotateVAroundP[V3, 60*Degree, 150, 150];
V5 = FullSimplify[V4 + {{0}, {96.46}}];
Solve[RotateVAroundP[V5, -30*Degree, x, y] == {{168.48 + 100.08/2}, {164.88 + 200.16/2}}]
Out[10] =
{{x -> 218.78146997001204, y -> 264.4524797111341}}
Verifying
I don't know anything about WPF, but I dabble in SVG. Working from the initial opaque arrow to the transparent one, the subsequent transformations in each element are applied from right to left.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="-25 -25 350 425" width="560" height="680">
<rect xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" x="0" y="0" width="300" height="375"/>
<rect fill="darkgray" fill-opacity=".3" x="168.48" width="100.08" height="200.16" y="164.88"/>
<path stroke="red" id="redShape" d="M0,150 25,150 25,0 75,0 75,150 100,150 50,200 Z " stroke-width="2" fill=" red"/>
<use href="#redShape" transform="rotate(330, 50, 100)" fill-opacity=".8"/>
<use href="#redShape" transform="translate(150,0) rotate(330, 50, 100)" fill-opacity=".6"/>
<use href="#redShape" transform="rotate(60,150,150) translate(150,0) rotate(330, 50, 100)" fill-opacity=".4"/>
<use href="#redShape" transform="translate(0,96.46) rotate(60,150,150) translate(150,0) rotate(330, 50, 100)" fill-opacity=".2"/>
<use href="#redShape" transform="rotate(-30, 218.781, 264.452) translate(0,96.46) rotate(60,150,150) translate(150,0) rotate(330, 50, 100)" fill-opacity="0"/>
</svg>
Generalizing
If you want to rotate the point V to the point W by applying a rotation θ around a point P, the coordinates for P are the expressions below.
In[11] :=
FullSimplify[Solve[RotateVAroundP[{{Vx}, {Vy}}, \[Theta], Px, Py] == {{Wx}, {Wy}}, {Px, Py}]]
Out[11] =
{{Px -> (1/2)*(Vx + Wx + (Vy - Wy)*Cot[\[Theta]/2]), Py -> (1/2)*(Vy + Wy + (-Vx + Wx)*Cot[\[Theta]/2])}}