Entry 10-transform (transformation) Application

Next we will introduce the application of Silverlight Transformation (transform ).

First, let's talk about the four types of deformation effects supported by Silverlight:
-Rotation effect <rotatetransform.../>
-Moving effect <translatetransform.../>
-Tilt effect <skewtransform.../>
-Scaling effect <scaletransform.../>

These effects can be used in combination, and various deformation effect declarations can be placed in <transformgroup.../>.
The four deformation effects are described as follows:
Rotatetransform rotates an angle using the angle attribute of <rotatetransform.../>;
Translatetransform uses the X and Y attributes of <translatetransform.../> to specify the object displacement;
Skewtransform specifies a skew angle through the anglex and angley attributes of <skewtransform.../>;
Scaletransform uses the scalex and scaley attributes of <scaletransform.../> to specify the multiples of amplification and reduction;

Applicable object type for deformation effect (see Silverlight 1.0 help documentation ):
-Brush
-Solidcolorbrush
-Lineargradientbrush
-Radialgradientbrush
-Imagebrush
-Videobrush
-Geometry
-Ellipsegeometry
-Linegeometry
-Pathgeometry
-Rectanglegeometry
-Uielement
-Canvas
-Ellipse
-Glyphs
-Image
-Mediaelement
-Retangle
-Polygon
-Polyline
-Shape
-Textblock
-Path
-Line
-Inkpresener
-Run

The following describes the important attributes of these transformations.
Rotatetransform
========================================
Angle Rotation Angle
Centerx rotation center X coordinate
Centery center vertical coordinate
The preceding three attribute values are of the double type;
Basic Syntax:
<Rotatetransform angle = "double" centerx = "double" centery = "double"/>
========================================

Scaletransform
========================================
Scalex scales multiple times along the X axis
Scaling multiple of scaley along Y axis
Horizontal coordinate of centerx zoom Center
Centery zooming center ordinate
The preceding four attribute values are double type;
Basic Syntax:
<Scaletransform scalex = "double" scaley = "double" centerx = "double" centery = "double"/>
========================================

Skewtransform
========================================
Anglex skew along the X axis
Angley skew along the Y axis
Horizontal coordinate of centerx zoom Center
Centery zooming center ordinate
All the preceding four attribute values are double-type.
Basic Syntax:
<Skewtransform anglex = "double" angley = "double" centerx = "double" centery = "double"/>
========================================

Translatetransform
========================================
X displacement along the X axis
Y displacement along Y axis
The preceding two attribute values are double-type.
Basic Syntax:
<Translatetransform x = "double" Y = "double"/>
========================================

The following code provides the following examples:
Code 1 rotatetransform
========================================
<Canvas xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas background = "lightblue" width = "300" Height = "300">
<Textblock name = "mytextblock1" canvas. Left = "60" canvas. Top = "65"
Fontfamily = "Arial" fontstyle = "normal" fontsize = "50" foreground = "Silver"
Width = "300" Height = "300" textwrapping = "Wrap">
Microsoft
<Textblock. rendertransform>
<Rotatetransform angle = "45" centerx = "50" centery = "50"/>
</Textblock. rendertransform>
</Textblock>
</Canvas>
</Canvas>
========================================

For the scaletransform effect example, see Application 1-five-star red flag
The following is a classic scaletransform application-Reflection
========================================
<Canvas xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas. Left = "40" canvas. Top = "50">
<! -- Textblock 1 -->
<Textblock text = "Microsoft" foreground = "blue" fontsize = "50"/>
<! -- Textblock 2 -->
<Textblock text = "Microsoft" foreground = "Silver" canvas. Top = "135" fontsize = "50">
<Textblock. rendertransform>
<Scaletransform scaley = "-1"/>
</Textblock. rendertransform>
</Textblock>
</Canvas>
</Canvas>
========================================

Code 3 skewtransform
========================================
<Canvas xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas X: Name = "parentcanvas">
<! -- Original text -->
<Textblock text = "microhoo" fontsize = "30" foreground = "black" canvas. Left = "100" canvas. Top = "30"/>
<! -- Textblock 1 -->
<Textblock text = "microhoo" fontsize = "30" foreground = "blue" canvas. Left = "120" canvas. Top = "80">
<Textblock. rendertransform>
<Skewtransform anglex = "-30"/>
</Textblock. rendertransform>
</Textblock>
<! -- Textblock 2 -->
<Textblock text = "microhoo" fontsize = "30" foreground = "red" canvas. Left = "80" canvas. Top = "130">
<Textblock. rendertransform>
<Skewtransform anglex = "30"/>
</Textblock. rendertransform>
</Textblock>
<! -- Textblock 3 -->
<Textblock text = "microhoo" fontsize = "30" foreground = "orange" canvas. Left = "80" canvas. Top = "180">
<Textblock. rendertransform>
<Skewtransform anglex = "30" angley = "15"/>
</Textblock. rendertransform>
</Textblock>
<! -- Textblock 4 -->
<Textblock text = "microhoo" fontsize = "30" foreground = "Silver" canvas. Left = "80" canvas. Top = "230">
<Textblock. rendertransform>
<Skewtransform angley = "-45"/>
</Textblock. rendertransform>
</Textblock>
<! -- Textblock 5 -->
<Textblock text = "microhoo" fontsize = "30" foreground = "Purple" canvas. Left = "80" canvas. Top = "130">
<Textblock. rendertransform>
<Skewtransform angley = "45"/>
</Textblock. rendertransform>
</Textblock>
</Canvas>
</Canvas>
========================================

Code 4: translatetransform Effect
========================================
<Canvas xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas>
<! -- Image origion -->
<Image Source = "mypic.jpg" opacity = "0.5">
<Image. rendertransform>
<Translatetransform x = "0" Y = "0"/>
</Image. rendertransform>
</Image>
<! -- Image transalte -->
<Image Source = "mypic.jpg">
<Image. rendertransform>
<Translatetransform x = "100" Y = "100"/>
</Image. rendertransform>
</Image>
</Canvas>
</Canvas>
========================================
Paste the preceding four codes to myxaml.xamlin step 1, and then double-click samplehtmlpage.html to run the code. The result is displayed.

We can also combine multiple effects in one effect group. Here we use transformgroup to declare multiple effects.
<Transformgroup>
<Rotatetransform.../>
<Skewtransform.../>
<Translatetransform.../>
<Scaletransform.../>
</Transformgroup>
You can try to modify and run the above examples to see the power of the combination.

Finally, we will introduce a complex transformation effect called matrixtransform ).
Essentially, all transformation results are derived from the matrix, which is a 3*3 matrix. The parameters are as follows:

################################
M11 M12
Default: 1.0 default: 0.0 0.0
################################
M12 m22
Default: 0.0 default: 1.0 0.0
################################
Offsetx offsety
Default: 0.0 default: 0.0 1.0
################################

The third column, 0.0, 0.0, and 1.0 are the constant columns. This is because Silverlight only supports affine transform, so the last column is always: 0 0 1.
Through the above matrix information, we can verify that the translatetransform effect is equivalent to the following matrix effect:
1 0 0
0 1 0
Offsetx offsety 1
Offsetx controls the coordinate displacement of the X axis and offsety controls the coordinate displacement of the Y axis.

Scaletransform has the following matrix effects:
M11 0 0
0 m22 0
0 0 1
Among them, M11 controls scalex and m22 controls scaley.

Rotatetransform is equivalent to the following matrix effects:
Cos (a) sin (a) 0
Sin (-a) Cos (a) 0
0 0 1
A is the set Rotation Angle

Skewtransform is equivalent to the following matrix effects:
Skewx effect:
1 0 0
Tan (a) 1 0
0 0 1

Skewy effect:
1 Tan (a) 0
0 1 0
0 0 1
Here, a is the skew angle.
You can set different effects for verification.

Forge ahead, boldly innovate
Montgomery Zhu