围绕点旋转图像并翻译

Question

I can rotate an Image around it's upper left corner but I need to rotate it around the blue x ("0.5,1"). RenderTransformOrigin doesn't do it. My image also need to be translated to the Black Ellipse.

 <Image x:Name="hut1" Visibility="Visible" Stretch="Fill" Canvas.Left="0"  Canvas.Top="0" Height="100" Width="100" RenderTransformOrigin="0,0">
     <Image.RenderTransform>
           <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"  />
                <RotateTransform CenterX="0" CenterY="0"  Angle="-11" />
                <TranslateTransform X="30" Y="150" />
          </TransformGroup>
    </Image.RenderTransform>
    <Image.Source>
          <BitmapImage UriSource="\Hat.png"/>
    </Image.Source>
</Image>

Answer 1

Set the Canvas.Left and Top properties to the same values that are applied to the Ellipse. Then use RenderTransformOrigin and TranslateTransform to transform the Image into the correct relative position:

<Image x:Name="hut1" Stretch="Fill"
       Canvas.Left="30" Canvas.Top="150"
       Height="100" Width="100"
       RenderTransformOrigin="0.5,1"
       Source="\Hat.png">
    <Image.RenderTransform>
         <TransformGroup>
             <ScaleTransform ScaleX="1" ScaleY="1" />
             <RotateTransform Angle="-11" />
             <TranslateTransform X="-50" Y="-100" />
         </TransformGroup>
     </Image.RenderTransform>
</Image>

One may as well first translate and then rotate the Image, and thus avoid the need for setting RenderTransformOrigin :

<Image x:Name="hut1" Stretch="Fill"
       Canvas.Left="30" Canvas.Top="150"
       Height="100" Width="100"
       Source="\Hat.png">
    <Image.RenderTransform>
         <TransformGroup>
             <ScaleTransform ScaleX="1" ScaleY="1" />
             <TranslateTransform X="-50" Y="-100" />
             <RotateTransform Angle="-11" />
         </TransformGroup>
     </Image.RenderTransform>
</Image>

Answer 2

Here's a quick snippet from an image where the rotation point is bottom middle

HorizontalAlignment="Left" Height="100" Margin="196,99,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.523,1.111"/>

(RenderTransformOrigin in this example)

Hope this helps you out :))