RenderTransform RotateTransform模糊图像

Question

我有以下自定义UserControl，它表示我的应用程序中的卡：

<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图像，然后，当我在构造函数中创建一个传递Suit和Rank枚举值的新卡时，我会计算出图像的正确剪贴符和转换。一切都很有魅力..。除了当我试图用一个需要90°旋转的Storyboard动画我的卡。下面是我的代码( Storyboard在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="True"，在我的MainWindow中使用SnapsToDevicePixels="True"，就像在其他地方建议的那样.但这不管用！当然..。如果我用LayoutTransform而不是RenderTransform旋转卡片，一切都很完美，卡片也不会模糊.但我不能让卡围绕它的中心旋转，我的动画需要从中心旋转90°。动画Canvas.Top一半的卡高度加上布局旋转看上去像一个非常不明智的解决方案.这也让我的动画看起来很糟糕。你能给我提个解决办法吗？

我试着用RenderOptions.BitmapScalingMode="NearestNeighbor"和RenderOptions.EdgeMode="Aliased"..。但情况变得更糟了：

​

​

Answer 1

问题是底层图像，以及布局，有一个奇数作为宽度(83)。RenderTransformOrigin，即使设置为“0.5”，也可能是向上或向下舍入该值，从而导致非常糟糕的呈现。将图像和布局宽度都更改为偶数(82)，完全解决了这个问题。

Answer 2

您可以尝试更改Image上的Image，并查看是否可以找到有效的设置，我已经在应用程序中添加了用于此情况的设置示例。

   RenderOptions.BitmapScalingMode="NearestNeighbor"
   RenderOptions.EdgeMode="Aliased"

示例：

    <Image RenderOptions.BitmapScalingMode="NearestNeighbor"
           RenderOptions.EdgeMode="Aliased"
           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>

Answer 3

您指出，使用LayoutTransform可以很好地工作，而不会模糊图像。你试过使用它并指定中心作为旋转的枢轴吗？

类似于：

<Image ...>
  <Image.LayoutTransform>
    <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90"/>
  </Image.LayoutTransform>
</Image>