的RenderTransform RotateTransform图像模糊 [英] RenderTransform RotateTransform Blurry Image

问题描述

我有以下的自定义用户控件的再$ P $在我的应用程序psents一张牌：

I have the following custom UserControl that represents a card in my application:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:Core="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Namespace="clr-namespace:MyApp" xmlns:Properties="clr-namespace:MyApp.Properties" Core:Class="MyApp.Card" Height="176" RenderTransformOrigin="0.5,0.5" Width="83" UseLayoutRounding="True">
    <UserControl.LayoutTransform>
        <TransformGroup>
            <RotateTransform/>
            <ScaleTransform/>
        </TransformGroup>
    </UserControl.LayoutTransform>
    <UserControl.RenderTransform>
        <TransformGroup>
            <RotateTransform/>
            <ScaleTransform/>
        </TransformGroup>
    </UserControl.RenderTransform>
    <UserControl.Resources>
        <Namespace:ImagesConverter Core:Key="ImagesConverter"/>
    </UserControl.Resources>
    <Canvas Core:Name="Layout">
        <Image Core:Name="Image" HorizontalAlignment="Left" Source="{Binding Source={Core:Static Properties:Resources.Cards}, Converter={StaticResource ImagesConverter}}" Stretch="None" VerticalAlignment="Top">
            <Image.Clip>
                <RectangleGeometry Core:Name="Clipping" Rect="0,0,83,176"/>
            </Image.Clip>
            <Image.RenderTransform>
                <TranslateTransform Core:Name="Translation" X="0" Y="0"/>
            </Image.RenderTransform>
        </Image>
        <Rectangle Core:Name="Highlight" Canvas.Left="-2" Canvas.Top="-2" Height="180" Opacity="0.7" Stroke="#FFFFF500" StrokeThickness="3" Visibility="Collapsed" Width="87"/>
    </Canvas>
</UserControl>

正如你所看到...我有一个包含所有卡面有点PNG图像，然后，当我创建一个新的卡通过西服和<$ C $在构造函数C>等级枚举值，我计算出图像的正确剪裁rectagle和翻译。
一切就像一个魅力...除了当我尝试用故事板，需要一个90°旋转的动画我的名片。这里是我的code（即故事板在 MainWindow.Resources 定义）：

As you can see... I have a bit PNG image containing all the card faces and then, when I create a new card passing Suit and Rank enum values in constructor, I calculate the correct clipping rectagle and translation for the image. Everything works like a charm... except when I try to animate my card with a Storyboard that requires a 90° rotation. Here is my code (the Storyboard is defined in MainWindow.Resources):

<DoubleAnimation BeginTime="00:00:00.4" Duration="00:00:00.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" To="90"/>

这是结果：

我不明白这是怎么回事......但图像被莫名其妙地伸展和变得因为你可以看到很模糊。我试着用 UseLayoutRounding =真在我的<$ C我的卡控制，也 SnapsToDevicePixels =真 $ C>主窗口的建议别处...但它不工作！
当然...如果我旋转使用该卡 LayoutTransform 而不是的RenderTransform 一切完美和卡是不模糊...但我不能让卡绕它的中心和我的动画需要从中心旋转90°。动画 Canvas.Top 该卡具有高度的布局一起旋转的一半在我看来就像一个很unbrilliant解决方案......这也使我的动画看起来非常糟糕。
你可以建议我一个解决方案吗？

I can't understand what's going on... but the images gets somehow stretched and becomes very blurry as you can see. I tried using UseLayoutRounding="True" in my card control and also SnapsToDevicePixels="True" in my MainWindow as suggested somewhere else... but it's not working! Of course... if I rotate the card using LayoutTransform instead of RenderTransform everything works perfectly and the card is not blurry... but I can't make the card rotate around it's center and my animation requires a 90° rotation from the center. Animating Canvas.Top for half of the card height together with layout rotation looks to me like a very unbrilliant solution... and it also makes my animation looks very bad. Can you suggest me a solution please?

我试图用 RenderOptions.BitmapScalingMode =最近邻和 RenderOptions.EdgeMode =别名 ...但它会变得更糟：

I tried to use RenderOptions.BitmapScalingMode="NearestNeighbor" and RenderOptions.EdgeMode="Aliased"... but it becomes even worse:

推荐答案

的问题是，底层的形象，所以布局，有一个奇怪的值宽度（83）。 RenderTransformOrigin，即使设置为0.5,0.5，大概还是四舍五入上下造成了极坏的表现，它的价值。
改变着形象，布局宽度为偶数值（82），完全解决了这个问题。

The problem was that the underlying image, and so the layout, had an odd value as Width (83). RenderTransformOrigin, even if set to "0.5,0.5", was probably rounding up or down that value resulting in a very bad rendering. Changing both the image and layout Width to a even value (82), totally resolved the problem.

这篇关于的RenderTransform RotateTransform图像模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！