使用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，它的相對值。帆布是絕對定位。