1

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列挙値を作成すると、画像の正しいクリッピング四角形と変換が計算されます。すべてが魔法のように機能します... Storyboard90° の回転が必要な でカードをアニメーション化しようとする場合を除きます。これが私のコードです（これ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"私は自分のカードコントロールで使用しようとしましたが、他の場所で提案さSnapsToDevicePixels="True"れてMainWindowいるように...しかし、機能していません! もちろん...LayoutTransform代わりに使用してカードを回転させると、RenderTransformすべてが完全に機能し、カードがぼやけません...しかし、カードを中心に回転させることはできず、アニメーションには中心から90°の回転が必要です。レイアウトの回転と一緒にカードの高さの半分をアニメーション化するCanvas.Topことは、私には非常に見栄えの悪い解決策のように見えます...そして、アニメーションの見た目も非常に悪くなります。解決策を教えてください。

[編集] 私は使用しようとしましたRenderOptions.BitmapScalingMode="NearestNeighbor"...RenderOptions.EdgeMode="Aliased"しかし、それはさらに悪化します:

ここに画像の説明を入力

4

4 に答える 4

3

問題は、下にある画像、つまりレイアウトの幅 (83) が奇数であるということでした。RenderTransformOrigin が "0.5,0.5" に設定されていたとしても、おそらくその値を切り上げたり切り下げたりしていたため、非常に悪いレンダリングになっていました。画像とレイアウトの両方の幅を偶数の値 (82) に変更すると、問題は完全に解決されました。

于 2013-02-18T13:16:38.770 に答える
1

あなたは、使用LayoutTransformが画像をぼかすことなく完全に機能することを示しました。それを使って、中心を回転のピボットとして指定してみましたか？

何かのようなもの：

<Image ...>
  <Image.LayoutTransform>
    <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90"/>
  </Image.LayoutTransform>
</Image>
于 2013-02-16T04:15:07.560 に答える
1

RenderOptionsを変更してみ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>
于 2013-02-16T03:03:43.077 に答える