Wpf

WPF：RenderTransformエフェクト



Wpf Rendertransform Effects



WPF変更（RenderTransform）クラスは、目的のために設計されたSilverlightオブジェクト（ズーム、回転要素など）に直接形状変更を行うことであり、変形可能なRenderTransform属性メンバーは、オブジェクトSilverlightの形状を変更するように設計されています。ストレッチ要素、回転、歪み、その他の効果で実現できますが、変形を支援するために効果も一般的に使用され、さまざまなアニメーション効果が生成されます。

1.1。RenderTransformカテゴリ：

このクラスのメンバーは次のとおりです。



TranslateTransform：オブジェクトの平行移動の位置を変更できるようにします。

RotateTransform：オブジェクトが中心点に基づいて回転、時計回りまたは反時計回りの回転の変化を生成できるようにします。



ScaleTransform：オブジェクトがスケーリングされた変更を生成できるようにします。

SkewTransform：オブジェクトを歪める変更を許可します。

TransformGroup：オブジェクトには、ズーム、回転、歪み、およびその他の変更の効果を組み合わせて使用​​できます。



MatrixTransform：オブジェクトがマトリックスアルゴリズムのより複雑な変形を実現できるようにします。

変形要素は、並進修正、回転変換、スケーリングまたは変形、歪み、マトリックスの変化、および変形要素の組み合わせ、ターゲット変形効果で形成されたオブジェクト自体を変更せずによく使用される変形効果、生成された変形要素の通常の支援を含む。 Silverlightではさまざまなアニメーション効果があります。

通常、RenderTransformプロパティは軽量であるため、LayoutTransformプロパティよりもMediaElement要素のRenderTransformプロパティを使用する方が適切です。また、RenderTransformOrigin属性値を簡単に使用でき、相対座標を特定の変換（回転など）に使用できます。

2. TranslateTransform（翻訳の変更）：

元のオブジェクトの座標原点（0、0）に対するX、Yの2つのプロパティで構成され、次に、平行移動によってX軸、Y軸が変換されます。

画像 
<Canvas> <Image Canvas.Top='160' Canvas.Left='140' Source='sun.jpg' Opacity='0.5'>Image> <Image Canvas.Top='160' Canvas.Left='140' Source='sun.jpg'> <Image.RenderTransform> <TranslateTransform X='120' Y='120'>TranslateTransform> Image.RenderTransform> Image> Canvas>
画像

3. RotateTransform（回転の変更）：

（回転角度）、CenterX、CenterY（回転の中心）を含む角度属性

画像 
<Canvas> <Image Canvas.Top='160' Canvas.Left='140' Source='sun.jpg' Opacity='0.5'>Image> <Image Canvas.Top='160' Canvas.Left='140' Source='sun.jpg'> <Image.RenderTransform> <RotateTransform Angle='45' CenterX='0' CenterY='0'>RotateTransform> Image.RenderTransform> Image> Canvas>
画像

4. ScaleTransform（ズーム変更）：

これには、属性ScaleX、ScaleY、CenterX、CenterYが含まれます。ここで、ScaleX、ScaleYプロパティは、を使用してX、Y軸を拡大する複数のオブジェクトを表します。CenterXとCenterY属性は、中心点を指定します。

画像 
<Canvas> <Image Canvas.Top='160' Canvas.Left='140' Source='sun.jpg' Opacity='0.5'>Image> <Image Canvas.Top='160' Canvas.Left='140' Source='sun.jpg'> <Image.RenderTransform> <ScaleTransform ScaleX='0.5' ScaleY='0.5'>ScaleTransform> Image.RenderTransform> Image> Canvas>
画像

5. SkewTransform（ツイスト変更）：

プロパティAngleX、AngleY、CenterX、CenterYを含みます。ここで、AngleX要素はX軸に対する傾斜角度であり、AngleY要素はY軸の周りの傾斜角度を許可することです。また、CenterXとCenterYが中心点の位置です。

画像 
<Canvas> <Image Canvas.Top='160' Canvas.Left='140' Source='sun.jpg' Opacity='0.5'>Image> <Image Canvas.Top='160' Canvas.Left='140' Source='sun.jpg'> <Image.RenderTransform> <SkewTransform AngleX='30' AngleY='10'>SkewTransform> Image.RenderTransform> Image> Canvas>
画像

6. TransformGroup：

スケーリング、回転、歪みなどの変化効果を組み合わせたもの。 1回の変更で4つ以上の基本的な変更を行います。複数の効果の重ね合わせを実現する場合は、TransformGroupを使用します。それ以外の場合は、エラーが発生します。 TransformGroupは、StackPanelが埋め込まれたコントロールレイアウトで同様の役割を果たします。多くのバリエーションは、コンテナのバリエーションへの要素の組み合わせです。

画像 
<Canvas Width='640' Height='480'> <Rectangle Canvas.Top='20' Canvas.Left='200' Width='400' Height='300' Stroke='Black' StrokeThickness='5'> <Rectangle.RenderTransform> <TransformGroup>  <RotateTransform Angle='10'>RotateTransform>  <SkewTransform AngleX='-10' AngleY='30' CenterX='20' CenterY='50'>SkewTransform> TransformGroup> Rectangle.RenderTransform> <Rectangle.Fill> <ImageBrush ImageSource='sun.jpg'>ImageBrush> Rectangle.Fill> Rectangle> Canvas>
画像

7。MatrixTransform行列変換：

実際、他のバリエーションクラスコードの基礎となる実装、他のクラスはこのクラスの拡張に基づいており、MatrixTransformは行列算術演算によって実行され、対応する効果を与えるため、ユーザーアプリケーションをより単純にすることができます。の変形。

行列値の3列目が修正されました！


原理：

3 * 3行列による元の座標（x0、y0）、行列乗算によって取得された座標（x0 * M11 + x0 * M21、y0 * M12 + y0 * M22）に加えて、新しい座標（x1、y1）を取得するための（OffsetX、OffsetY）。その最終的な座標（x1、y1）：x1 = x0 * M11 + x0 * M21 + OffsetX、y1 = y0 * M12 + y0 * M22 + OffsetY。

 <MatrixTransform Matrix='M11 M12 M21 M22 OffsetX OffsetY'>MatrixTransform>

行列変換MatrixTransformを使用する上記の効果を実現するための次の5つの基本的な変換。

画像 
<Canvas Width='1200' Height='300'> <StackPanel Orientation='Horizontal' Canvas.Top='50'>  <Image Source='Images/adobe_Ai.png' Height='100' Width='100' Stretch='Fill' Margin='10' Opacity='0.5'>Image> <Image Source='Images/adobe_Ai.png' Height='100' Width='100' Stretch='Fill' Margin='10'> <Image.RenderTransform> <MatrixTransform Matrix='1 0 0 1 -80 30'>MatrixTransform> Image.RenderTransform> Image>  <Image Source='Images/adobe_Dw.png' Height='100' Width='100' Stretch='Fill' Margin='10' Opacity='0.5'>Image> <Image Source='Images/adobe_Dw.png' Height='100' Width='100' Stretch='Fill' Margin='10'> <Image.RenderTransform>  <MatrixTransform Matrix='0 1 -1 0 30 0'>MatrixTransform> Image.RenderTransform> Image>  <Image Source='Images/adobe_Fl.png' Height='100' Width='100' Stretch='Fill' Margin='10' Opacity='0.5'>Image> <Image Source='Images/adobe_Fl.png' Height='100' Width='100' Stretch='Fill' Margin='10'> <Image.RenderTransform>  <MatrixTransform Matrix='1.5 0 0 1.5 -80 0'>MatrixTransform> Image.RenderTransform> Image>  <Image Source='Images/adobe_Fw.png' Height='100' Width='100' Stretch='Fill' Margin='10' Opacity='0.5'>Image> <Image Source='Images/adobe_Fw.png' Height='100' Width='100' Stretch='Fill' Margin='10'> <Image.RenderTransform>  <MatrixTransform Matrix='1 0 1 1 -80 0'>MatrixTransform> Image.RenderTransform> Image>  <Image Source='Images/adobe_Id.png' Height='100' Width='100' Stretch='Fill' Margin='10' Opacity='0.5'>Image> <Image Source='Images/adobe_Id.png' Height='100' Width='100' Stretch='Fill' Margin='10'> <Image.RenderTransform>   <MatrixTransform Matrix='1.5 0 1 1.5 -120 0'>MatrixTransform> Image.RenderTransform> Image> StackPanel> Canvas>