Wpf:rendertransform effects

The Morph (RenderTransform) class in WPF is designed to directly change the shape of a Silverlight object, such as zooming, rotating an element, RenderTransform contains a Morph attribute member that is specifically designed to change the shape of a Silverlight object, which can be used to stretch, rotate, twist, and so on, while the Morph effect is often useful for creating various animations.

1. RenderTransform class:

The class members are as follows:

TranslateTransform: The ability to translate changes in the position of an object.

RotateTransform: Enables an object to produce rotational changes, clockwise or counterclockwise, depending on the center point.

ScaleTransform: Enables an object to produce a zoom change.

SkewTransform: The ability to distort changes in an object.

TransformGroup: The ability to combine the scaling, rotation, and twisting effects of an object with a combination of changes.

MatrixTransform: Enables an object to achieve more complex transformations through a matrix algorithm.

Deformation elements include translational, rotational, scale, warp, matrix, and composite deform elements, which are often used to deform objects without altering the composition of the object, so deform elements often assist in producing various animation effects in Silverlight.

In general, using the RenderTransform property for MediaElement elements is better than using the LayoutTransform property, because the RenderTransform property is lightweight. It can also use a convenient Rendertransformorigin property value, allowing relative coordinates to be used for a particular transformation, such as rotation.

2. TranslateTransform (Translational Change):

Contains the X, Y properties, the original object as the coordinate origin (0,0), and the translation transformation to the x-axis and y-axis.

<Canvas>         <image canvas.top= "canvas.left=" "source=" sun.jpg "opacity=" 0.5 "></Image>         <image canvas.top= "canvas.left=  " Source= "Sun.jpg" >             <Image.RenderTransform>                 <translatetransform x= "" "Y=" ></" translatetransform>             </Image.RenderTransform>         </Image></Canvas>

3. RotateTransform (rotation change):

Includes attribute angle (rotation angle), CenterX, CenterY (center of rotation)

<Canvas>         <image canvas.top= "canvas.left=" "source=" sun.jpg "opacity=" 0.5 "></Image>         <image canvas.top= "canvas.left=  " Source= "Sun.jpg" >             <Image.RenderTransform>                 <rotatetransform angle= "centerx=" 0 "centery=" 0 " ></RotateTransform>             </Image.RenderTransform>         </Image></Canvas>

4. ScaleTransform (zoom change):

Includes attributes ScaleX, ScaleY, CenterX, CenterY, where the ScaleX, ScaleY properties represent multiples of the object's scaling on the X and Y axes, and Specify a center point using the CenterX and CenterY properties.

<Canvas>         <image canvas.top= "canvas.left=" "source=" sun.jpg "opacity=" 0.5 "></Image>         <image canvas.top= "canvas.left=  " Source= "Sun.jpg" >             <Image.RenderTransform>                 <scaletransform scalex= "0.5" scaley= "0.5" ></ scaletransform>             </Image.RenderTransform>         </Image></Canvas>

5. SkewTransform (Twist Change):

Includes attributes Anglex, Angley, CenterX, CenterY. Where you use Anglex to tilt the element relative to the x-axis, the Angley is the tilt angle of the element around the y-axis. The same CenterX and CenterY are the center point locations.

<Canvas>         <image canvas.top= "canvas.left=" "source=" sun.jpg "opacity=" 0.5 "></Image>         <image canvas.top= "canvas.left=  " Source= "Sun.jpg" >             <Image.RenderTransform>                 <skewtransform anglex= "Ten" angley= "></" skewtransform>             </Image.RenderTransform>         </Image></Canvas>

6. TransformGroup:

Zoom, rotate, twist, and so on change effect merge together. The above four basic changes are only a single change, if you want to achieve a variety of effects of the overlay, then you need to use to TransformGroup, or will error. TransformGroup is similar to the role of StackPanel embedded in the layout of a control, and is a container that combines various elements of change into a change.

<canvas width= "640" height= "480" >         <rectangle canvas.top= "a" canvas.left= "$" width= "300" height= " Stroke= "Black" strokethickness= "5" >             <Rectangle.RenderTransform>                 <TransformGroup>                     <!--RotateTransform--                     <rotatetransform angle= ></RotateTransform>                     <!-- SkewTransform Transform--                     <skewtransform anglex= " -10" angley= "centerx=" "centery=" [></] skewtransform>                 </TransformGroup>             </Rectangle.RenderTransform>             <rectangle.fill >                 <imagebrush imagesource= "sun.jpg" ></ImageBrush>             </Rectangle.Fill>         </ Rectangle> </Canvas>

7. MatrixTransform Matrix Transformation:

In fact, other variants of the underlying implementation of the code, the other classes are based on the extension of this class, so that users can be more simple and convenient application, as for the MatrixTransform is a matrix algorithm to calculate the corresponding deformation effect.

The value of the third column in the matrix is fixed!


Principle:

The original coordinates (X0,Y0) through the 3*3 matrix, the coordinates can be obtained by matrix multiplication (x0 * m11+x0 * m21,y0 * m12+y0 * M22), plus (offsetx,offsety) to obtain the new coordinates (X1,Y1). That is, the final coordinate (x1,y1): x1 = x0 * M11 + x0 * M21 + OffsetX, y1 = y0 * M12 + y0 * M22 + OffsetY.

<!--source code usage-<matrixtransform matrix= "M11 M12 M21 M22 OffsetX OffsetY" ></MatrixTransform>

The following five basic transformations are implemented using the MatrixTransform matrix transform.

<canvas width= "height=" > <stackpanel orientation= "Horizontal" canvas.top= ">" lt;!                     --TranslateTransform pan-to-<image source= "images/adobe_ai.png" height= "" width= "" stretch= "" Fill " margin= "opacity=" 0.5 "></Image> <image source=" Images/adobe_ai.png "height=                     "Width=" stretch= "Fill" margin= "ten" > <Image.RenderTransform> <matrixtransform matrix= "1 0 0 1-80" ></MatrixTransform> </image.rendertrans Form> </Image> <!--rotatetransform Rotate--<image source= "images/ad             Obe_dw.png "height=" "width=", "stretch=" "Fill" margin= "ten" opacity= "0.5" ></Image>                 <image source= "Images/adobe_dw.png" height= "the" width= "stretch=" "Fill" margin= "ten" > <imaGe. Rendertransform> <!--90°--<matrixtransform matrix= "0 1-1 0 30 0 "></MatrixTransform> </Image.RenderTransform> </Image> <!                    --ScaleTransform Zoom--<image source= "images/adobe_fl.png" height= "[]" width= "stretch=" "Fill" margin= "opacity=" 0.5 "></Image> <image source=" images/adobe_fl.png "height=" 100                     "Width=" stretch= "Fill" margin= "ten" > <Image.RenderTransform>                  <!--magnification 1.5 times--<matrixtransform matrix= "1.5 0 0 1.5-80 0" ></MatrixTransform>             </Image.RenderTransform> </Image> <!--skewtransform Twisted tilt-to- <image source= "images/adobe_fw.png" height= "" "Width=" stretch= "" Fill "margin=" 10 " opacity= "0.5" ></image> <image source= "images/adobe_fw.png" height= "[] width=" stretch= "Fill" M Argin= "Ten" > <Image.RenderTransform> <!--x-axis Tilt---& Lt             MatrixTransform matrix= "1 0 1 1-80 0" ></MatrixTransform> </Image.RenderTransform> </Image> <!--TransformGroup Twist, Zoom--<image source= "Images/adobe_id.png" Hei ght= "width=" "stretch=" Fill "margin=" opacity= "0.5" ></Image> <image Source= "Images/adobe_id.png" height= "width=" stretch= "Fill" margin= "ten" > &L T;image. Rendertransform> <!--x-axis Tilt-<!--magnification 1.5 times--&L T             MatrixTransform matrix= "1.5 0 1 1.5-120 0" ></MatrixTransform> </Image.RenderTransform> &lT;/image> </StackPanel> </Canvas> 

Wpf:rendertransform effects