使用WPF在画布中合适的图像

Question

我有画有孩子图像的画布。这是我的XAML：

<Canvas x:Name="ImageArea" ClipToBounds="True"> 
    <Image x:Name="BigImage" RenderTransformOrigin="0.5,0.5"> 
     <Image.RenderTransform> 
      <TransformGroup> 
       <RotateTransform x:Name="ImageRotateTransform" Angle="0"/> 
       <ScaleTransform x:Name="ImageScaleTransform" ScaleX="1" ScaleY="1"/> 
       <TranslateTransform x:Name="ImageTranslateTransform" X="0" Y="0"/> 
      </TransformGroup> 
     </Image.RenderTransform> 
    </Image> 
</Canvas> 

我想在画布上，以适应这个图像与此代码：

var fitSize = Math.Max(BigImage.ActualHeight, BigImage.ActualWidth); 
var targetSize = Math.Min(ImageArea.ActualHeight, ImageArea.ActualWidth); 
var ratio = targetSize/fitSize; 
ImageScaleTransform.ScaleX = ImageScaleTransform.ScaleY = ratio; 
ImageTranslateTransform.X = 
    fitSize == BigImage.ActualWidth ? 
    0 : ImageArea.ActualWidth/2 - BigImage.ActualWidth*ratio/2; 
ImageTranslateTransform.Y = 
    fitSize == BigImage.ActualHeight ? 
    0 : ImageArea.ActualHeight/2 - BigImage.ActualHeight * ratio/2; 

此代码计算缩放比例，然后尝试根据它的大小，居中图像。 问题是平移变换的X和Y坐标是正确计算的，但图像而不是按预期定位（仅在画布的底部可见的图像的一小部分）。如果将RenderTransformOrigin设置为0,0图像定位正常。

我错在哪里？

Answer 1

问题在于，缩放后Image不再位于Canvas的左上角，因此转换偏移似乎不起作用。

这是基于你的问题只有一个XAML片段，有一个红色Rectangle和我们所做的无非就是手动设置比例因子，以一年半，而不是一个：

<Grid> 
    <Canvas x:Name="ImageArea" ClipToBounds="False" Background="Gray" Width="200" Height="200"> 
     <Rectangle x:Name="BigImage" RenderTransformOrigin="0.5,0.5" Width="100" Height="100" Fill="Red"> 
      <Rectangle.RenderTransform> 
       <TransformGroup> 
        <RotateTransform x:Name="ImageRotateTransform" Angle="0"/> 
        <ScaleTransform x:Name="ImageScaleTransform" ScaleX="1.5" ScaleY="1.5"/> 
        <TranslateTransform x:Name="ImageTranslateTransform" X="0" Y="0"/> 
       </TransformGroup> 
      </Rectangle.RenderTransform> 
     </Rectangle> 
    </Canvas> 
</Grid> 

哪产生这样的结果：

这是因为RenderTransformOrigin设置。您可以不设置该属性或使用值"0,0"在缩放时保持左上角稳固就位。

Answer 2

使用一个Grid，它的相对值。帆布是绝对定位。