使用WPF在画布中调整图像 [英] Fit Image in canvas using WPF

问题描述

我有带有子图像的画布.这是我的XAML:

I have canvas with child images. Here is my 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>

我要使用以下代码将该图像放入画布中:

I want to fit this image in canvas with this code:

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 图片放置在正常位置.

This code computes scale ratio, then tries to center image depending of it size. The problem is that X and Y coordinates of translate transform are computed right but image not positioned as expected (only small part of image visible in bottom down of the canvas). If set RenderTransformOrigin to 0,0 image positioned normal.

我在哪里弄错了?

推荐答案

问题是 Image 不再位​​于 Canvas 缩放后，因此平移偏移似乎不起作用.

The problem is that the Image is no longer positioned in the upper-left hand corner of the Canvas after scaling and so the translation offsets don't appear to be working.

根据您的问题，这是一个仅XAML的片段，具有红色的 Rectangle ，我们所做的不过是将比例因子手动设置为一个半而不是一个:

Here is a XAML-only fragment based on your question that has a red Rectangle and we've done nothing more than manually set the scale factors to one and a half instead of one:

<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" 来缩放时使左上角牢牢固定.

This happens because of the RenderTransformOrigin setting. You can leave the property unset or use the value "0,0" to keep the upper-left hand corner firmly seated while you scale it.

这篇关于使用WPF在画布中调整图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！