围绕点旋转图像并平移

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变换到正确的相对位置：

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

Answer 2

这是一张图像的快速片段，其中旋转点位于底部中间

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

（本例中为 RenderTransformOrigin）

希望这对您有所帮助:))

围绕点旋转图像并平移

Rotate Image around point and translate

c#

wpf

xaml

transformation