的RenderTransform RotateTransform模糊图像

我有以下的定制UserControl代表我的应用程序的卡片：当的RenderTransform RotateTransform模糊图像

<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枚举值的新卡片，我计算了正确的剪切rectagle和图像转换。一切工作就像一个魅力...除非我尝试使用需要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"/>

，这里是结果：

enter image description here

我不明白这是怎么回事..但是你可以看到图像变得很模糊。我尝试在我的卡控制中使用UseLayoutRounding="True"，并在我的MainWindow中使用SnapsToDevicePixels="True"，正如其他地方所建议的那样...但它不起作用！当然......如果我使用LayoutTransform而不是RenderTransform旋转卡片，一切都很完美，并且卡片不是模糊的......但是我不能让卡片围绕它的中心旋转，我的动画需要旋转90°中央。动画Canvas.Top对卡片高度的一半和布局旋转看起来像一个非常unbrilliant的解决方案......这也使我的动画看起来非常糟糕。你能给我一个解决方案吗？

[编辑]我试图用RenderOptions.BitmapScalingMode="NearestNeighbor"和RenderOptions.EdgeMode="Aliased" ...但它会变得更糟：

enter image description here

来源

2013-02-16 Tommaso Belluzzo

的问题是，潜在的图像，所以布局，有一个奇数值为宽度（83）。 RenderTransformOrigin（即使设置为“0.5,0.5”）可能正在向上或向下取整，导致渲染效果很差。将图像和布局宽度都改为偶数值（82），完全解决了问题。

来源

2013-02-18 13:16:38

你可以尝试在Image量变到质变的RenderOptions，看看是否能找到一个设置

：作品，我在我的应用程序

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>

来源

2013-02-16 03:03:43

见我的编辑...它得到比:( – 2013-02-16 03:08:58

似乎之前它不为模糊不清，只是坏qualitiy更糟的是，也许尝试'RenderOptions.BitmapScalingMode = “HighQuality”''SnapToDevicePixels =“True”' – 2013-02-16 03:13:14

''Canvas'同样设置UseLayoutRounding =“True”'可能会有所帮助 – 2013-02-16 03:18:53

您表示使用LayoutTransform可以完美地工作，而不会模糊图像。你有没有尝试过使用它，并指定中心作为旋转的关键？

是这样的：

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

来源

2013-02-16 04:15:07 ryrich

是的......似乎没有被识别。 – 2013-02-16 10:49:00

As @Tommaso Belluzzo说，这是来自RenderTransformOrigin =“0.5,0.5”
上面的答案真的解决了我的问题。
请允许我表明我的代码如下：

System.Drawing.Bitmap bm = null; 
//RotateTransform(angle) with RenderTransformOrigin="0.5,0.5" might cause blurry if the width or height is odd, 
using (System.Drawing.Bitmap bitmap = (System.Drawing.Bitmap)System.Drawing.Image.FromFile(path)) 
{ 
    int width = bitmap.Width; 
    int height = bitmap.Height; 
    if (0 != width % 2) width ++; 
    if (0 != height % 2) height ++; 
    bm = new System.Drawing.Bitmap(width, height); 

    bm.SetResolution(96, 96); 
    using (System.Drawing.Graphics g = System.Drawing. Graphics.FromImage(bm)) 
    { 
     //I don't want to do anything which may modify(resize) the original image. 
     g.Clear(System.Drawing.Color.White); 
     g.DrawImage(bitmap, 0, 0, bitmap.Width, bitmap.Height); 
    } 
    //bm.Save([email protected]"\tmp.bmp", ImageFormat.Bmp); 

} 
//.....(show bm)

来源

2017-08-22 02:21:43

的RenderTransform RotateTransform模糊图像

回答

相关问题