web-dev-qa-db-ja.com

wpfで画像を反転する方法

最近、「TransformedBitmap」および「RotateTransformed」クラスを使用してBitmapImageを回転させる方法を学びました。これで、画像を時計回りに回転できるようになりました。しかし、どのように画像をフリップするのですか？ BitmapImageの水平および垂直フリップを実行するクラスが見つかりません。方法を理解するのを手伝ってください。たとえば、私のイメージが「d」のように見える図面である場合、垂直方向のフリップは「q」のようなものになり、水平方向のフリップは「b」のようなものになります。

c#wpfimage
47
Shashank

ScaleTransformを使用 水平の場合は-1のScaleX、垂直の反転の場合は-1のScaleYで、画像のRenderTransformプロパティに適用されます。画像でRenderTransformOrigin="0.5,0.5"を使用すると、画像が中央で反転することが保証されるため、追加のTranslateTransformを適用して所定の位置に移動する必要はありません。

<Image Source="a.jpg" Padding="5" RenderTransformOrigin="0.5,0.5">
  <Image.RenderTransform>
    <ScaleTransform ScaleX="-1"/>
  </Image.RenderTransform>
</Image>

水平反転および

<Image Source="a.jpg" Padding="5" RenderTransformOrigin="0.5,0.5">
  <Image.RenderTransform>
    <ScaleTransform ScaleY="-1"/>
  </Image.RenderTransform>
</Image>

垂直用。

コードビハインドで実行する場合、C＃では次のようになります。

img.RenderTransformOrigin = new Point(0.5,0.5);
ScaleTransform flipTrans = new ScaleTransform();
flipTrans.ScaleX = -1;
//flipTrans.ScaleY = -1;
img.RenderTransform = flipTrans;
111
luvieere

フリップにもう少し「深さ」を持たせ、真のフリップのように見えるようにするには、より小さなスケール変換でスキュー変換を実行する必要があります。

3Dで反転しているように見えるように、オブジェクトを約20度傾けることができます。これは貧弱な3Dフリップです。 WPFで真の3Dフリップを実現できますが、これには少し手間がかかります。

これにより、よりきれいに見えるアニメーションが得られ、2つの異なるパネルの表示を切り替えて、要素の前面と背面の印象を与えることができます。

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
  <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.3" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="0.6" />                              
  <SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.8" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
  <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.9" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)">
  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.06" Value="-10" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="-20" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="20" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="0" />
</DoubleAnimationUsingKeyFrames>
9
Brad Cunningham

Btwを水平（のみ）にフリップするための簡単なトリックは、FlowDirectionプロパティをFlowDirection.RightToLeftに設定することです。ただし、コンポーネントがコンテナである場合、その一部の子はプロパティを異なる方法で解釈する場合があります（カスタムロジック）

3
George Birbilis

興味深い3Dフリップ可能なユーザーコントロール： http://flipcontrol.codeplex.com/releases/view/22358

あなたの場合は、両側に同じ画像を表示する必要があります。

2
mcanti

負のScaleX/ScaleYで ScaleTransform を使用できます。

  <TextBlock Text="P">
   <TextBlock.RenderTransform>
    <ScaleTransform ScaleY="-1" ScaleX="-1" />
   </TextBlock.RenderTransform>
  </TextBlock>
1
Anvaka
<Image x:Name="SampleImage"  Margin="0" RenderTransformOrigin="0.5,0.5" >
        <Image.LayoutTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="1" ScaleX="-1"/>
                <SkewTransform AngleY="0" AngleX="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform/>
            </TransformGroup>
        </Image.LayoutTransform>
    </Image>

このような画像コンポーネントを作成します。ソースが設定されると、画像は左から右に反転します。

0
user4828078