在WPF中旋转时如何避免图像被剪切 [英] How to avoid image getting cut when rotated in WPF

问题描述

大家好，

为了避免旋转后的卡片背面图像被切掉，我做了很多尝试.

这是我的代码:

Hi guys,

I tried many things to avoid my card back image getting cut when rotated.

Here is my code :

<Window x:Class="WpfApplication1.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Animation" Height="600" Width="800">
    <Grid>
        <Image Height="120" Margin="12,11,676,430" Name="image1" Source="/Resources/Back.png" Stretch="Fill" Width="90">
            <Image.RenderTransform>
                <TranslateTransform />
            </Image.RenderTransform>
            <Image.LayoutTransform>
                <RotateTransform />
            </Image.LayoutTransform>
            <Image.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <!--<DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" From="12" To="650" AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:1"/>-->
                            <!--<DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="Width" From="90" To="120" Duration="0:0:1"/>-->
                            <!--<DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="Height" From="120" To="90" Duration="0:0:1"/>-->
                            <DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="(Image.LayoutTransform).(RotateTransform.Angle)" From="0" To="45" Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
    </Grid>
</Window>

预先感谢，
Marcelo

Thanks in advance,
Marcelo

推荐答案

由于变换，任何内容都可能被剪切掉.这似乎是一个非常常见的问题，需要了解操作顺序和旋转中心，而没有其他任何事情.还有太多因素:在一般情况下，转换不是可交换的，矩阵乘法也不是可交换的( http://en.wikipedia.org /wiki/Commutative_property [ ^ ]):如果您先进行平移，然后进行旋转变换，然后切换变换顺序，结果将有所不同，但是两次旋转或两次平移是可交换的.

因此，这完全是两个变换(平移和旋转)的效果，它们的顺序以及旋转操作及其变换的中心点的正确组合的问题.这种情况很简单；您可以仅凭一个简单的代码示例就可以了解到每个步骤的结果，并可以了解这些情况.也许首先在C#中进行，而不是在XAML中进行；您将清楚地看到每个变换的效果，并找到适合您的组合.

—SA

Anything can get cut as a result of transform. This looks like a very usual problem with understanding of order of operation and the center of rotation and nothing else. There are too factors: transforms are not commutative in general case, and the matrix multiplication does not commutative (http://en.wikipedia.org/wiki/Commutative_property[^]): if you do translation and then rotation transform and then switch the order of transforms, the results will be different, but two rotations or two translations are commutative.

So, this is all the matter of right combination of the effect of two transforms, translation and rotation, their order, and the center point of rotation operation and its transform. This case if very simple; you can just get a feeling of what''s going on on a simple code sample where you can see the result of each step. Perhaps do it in C# first, not in XAML; and you will clearly see the effect of each transform and find the combination which is right for you.

—SA

这篇关于在WPF中旋转时如何避免图像被剪切的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！