围绕点旋转图像并平移

Question

我可以围绕图像的左上角旋转图像，但是我需要围绕蓝色x（“ 0.5,1”）旋转图像。 RenderTransformOrigin不这样做。 我的图像也需要转换为黑色椭圆形。

 <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

将Canvas.Left和Top属性设置为与椭圆相同的值。然后使用RenderTransformOrigin和TranslateTransform将图片转换为正确的相对位置：

<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>

最好先平移然后旋转图像，从而避免设置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

这是旋转点位于底部中间的图片的简短摘录

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

（在此示例中为RenderTransformOrigin）

希望这可以帮助您：））