围绕点旋转图像并平移答案

【问题标题】：Rotate Image around point and translate围绕点旋转图像并平移
【发布时间】：2019-12-10 18:10:46
【问题描述】：

我可以围绕它的左上角旋转图像，但我需要围绕蓝色 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>

【问题讨论】：

请不要将代码分享为图片
还要注意椭圆是上/左对齐的。为了使其居中，添加Margin="-2.5"

标签： c# wpf xaml transformation

【解决方案1】：

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

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

也可以先平移再旋转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>

【讨论】：

【解决方案2】：

这是旋转点位于底部中间的图像的快速 sn-p

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

（本例中为 RenderTransformOrigin）

希望对你有所帮助:))

【讨论】：