Windows Phone development (18): transformers Season 9 -- change

Transformation is not an easy-to-understand concept. It involves a lot of knowledge about algebra, ry, and linear algebra. Why? Scared by my words? Don't worry, though we may not be able to understand these concepts, as long as we know how to use them.
In fact, transformation is a coordinate change on the plane. It sounds very abstract, but as long as I talk about it specifically, you will feel that it is not abstract.
I believe that if you have played photoshop or other plotting software, you should know what rotation is, what tilt is, what translation is ......
Yes, these are the changes we want to talk about today. Well, can you sit down and have a cup of pearl milk tea to relax now? Oh, by the way, try to drink less pearl milk tea.

Well, let's start today's performances.

 

1. translatetransform.

This should be the best understanding. It's just translation. I believe everyone will be familiar with it. Do you often play it when learning analytic ry? It is nothing more than two parameters-X and Y, respectively, the displacement of the two directions on the plane.

They are in the same position, but after translation, it seems that they are not in the same position.

<Canvas> <br/> <! -- The positions of the three rectangles in the canvas are the same, but after translation, <br/> it seems that they are not in the same position. <Br/> --> <br/> <rectangle width = "120" Height = "120" <br/> Fill = "darkgreen" <br/> canvas. zindex = "0" <br/> canvas. top = "15" <br/> canvas. left = "15"> <br/> <rectangle. rendertransform> <br/> <translatetransform x = "20" Y = "20"/> <br/> </rectangle. rendertransform> <br/> </rectangle> <br/> <rectangle width = "120" Height = "120" <br/> Fill = "yellow" <br/> canvas. zindex = "1" <br/> canvas. top = "15" <br/> canvas. left = "15"> <br/> <rectangle. rendertransform> <br/> <translatetransform x = "80" Y = "80"/> <br/> </rectangle. rendertransform> <br/> </rectangle> <br/> <rectangle width = "120" Height = "120" <br/> Fill = "blue" <br/> canvas. zindex = "2" <br/> canvas. top = "15" <br/> canvas. left = "15"> <br/> <rectangle. rendertransform> <br/> <translatetransform x = "140" Y = "140"/> <br/> </rectangle. rendertransform> <br/> </rectangle> <br/> </canvas>

 

2. rotatetransform.

This guy is used to rotate the element. The angle attribute is the rotation angle. I don't need to explain it. The primary school student's knowledge. Note the following two attributes:
Centerx: The X coordinate of the center of rotation. The coordinate is relative to the upper left corner of the target. For example, if you want to rotate a rectangle, the center of rotation is 0 by default, is the upper left corner of the rectangle;
Centery: it is the same as above, but only the point of Y coordinate.

These two rotation points are not very good at grasp. If we want to compare the relative positioning, we can use the rendertransformorigin attribute of the uielement to change the rotation origin. The coordinate of this point is relative to the visual boundary of the element, that is, the value between 0 and 1, for example:
1. upper left corner: (0, 0)
2. lower left corner)
3. Center on top: (0.5, 0)
4. Center the bottom: (0.5, 1)

In the three images, the center of rotation is centered at the bottom, but the rotation angle is different.

<Grid> <br/> <image margin = "289,42, 241,143" Source = "/transformsample; component/1.jpg" stretch = "Uniform" opacity = "0.3" <br/> rendertransformorigin = "0.5, 1"> <br/> <image. rendertransform> <br/> <rotatetransform angle = "-60"/> <br/> </image. rendertransform> <br/> </image> <br/> <image margin = "289,42, 241,143" Source = "/transformsample; component/1.jpg" stretch = "Uniform" opacity = "0.6" <br/> rendertransformorigin = "0.5, 1"> <br/> <image. rendertransform> <br/> <rotatetransform angle = "0"/> <br/> </image. rendertransform> <br/> </image> <br/> <image margin = "289,42, 241,143" Source = "/transformsample; component/1.jpg" stretch = "Uniform" <br/> rendertransformorigin = "0.5, 1"> <br/> <image. rendertransform> <br/> <rotatetransform angle = "60"/> <br/> </image. rendertransform> <br/> </image> <br/> </GRID>

 

 

Iii. scaletransform.

Similar to the Rotation Transformation above, but this is used to zoom in and out. It also has a center point, that is, the zoom center. Similarly, its default value is the upper left corner of the target element, you can adjust the coordinates of the zooming center by yourself.

 

In order to clearly see the scaling effect, the transparency is set for the next two images.

<Grid> <br/> <Image Source = "/transformsample; component/1.jpg" stretch = "Uniform" horizontalalignment = "center" verticalignment = "center" margin = "130" <br/> canvas. zindex = "0" opacity = "0.09"> <br/> <image. rendertransform> <br/> <scaletransform centerx = "110" centery = "180" scalex = "2" scaley = "2"/> <br/> </image. rendertransform> <br/> </image> </P> <p> <Image Source = "/transformsample; component/1.jpg" stretch = "Uniform" horizontalalignment = "center" verticalignment = "center" margin = "130" <br/> canvas. zindex = "1" opacity = "0.2"> <br/> <image. rendertransform> <br/> <scaletransform centerx = "120" centery = "150" scalex = "1.6" scaley = "1.6"/> <br/> </image. rendertransform> <br/> </image> </P> <p> <Image Source = "/transformsample; component/1.jpg" stretch = "Uniform" horizontalalignment = "center" verticalignment = "center" margin = "130" <br/> canvas. zindex = "2"/> <br/> </GRID>

 

 

4. skewtransform.

Distorted transformation can be said to be a tilt, which indeed achieves a tilt effect.
It also has a central point. Similar to the above, anglex is distorted along the X axis, and angley is distorted along the Y axis.

 

<Grid> <br/> <Image Source = "/transformsample; component/1.jpg" horizontalalignment = "center" <br/> verticalignment = "center" <br/> margin = "100"/> <br/> <Image Source = "/transformsample; component/1.jpg" horizontalalignment = "center" <br/> verticalignment = "center" <br/> margin = "100" opacity = "0.3"> <br/> <image. rendertransform> <br/> <skewtransform centerx = "0" centery = "-200" anglex = "30" angley = "0"/> <br/> </image. rendertransform> <br/> </image> <br/> <Image Source = "/transformsample; component/1.jpg" horizontalalignment = "center" <br/> verticalignment = "center" <br/> margin = "100" opacity = "0.3"> <br/> <image. rendertransform> <br/> <skewtransform centerx = "0" centery = "-550" anglex = "-15" angley = "0"/> <br/> </image. rendertransform> <br/> </image> </P> <p> </GRID>

 

 

V. transformgroup.

Strictly speaking, this is not a transformation, but it can combine n transformations.

 

<Grid> <br/> <Image Source = "/transformsample; component/1.jpg" <br/> stretch =" Uniform "margin =" 65,98, 472,92 "/> <br/> <Image Source ="/transformsample; component/1.jpg" <br/> stretch = "Uniform" margin = "65,98, 472,92 "> <br/> <image. rendertransform> <br/> <transformgroup> <br/> <translatetransform x = "270" Y = "30"/> <br/> <scaletransform scalex = "1.5" scaley = "1.5" centerx = "185" centery = "280"/> <br/> <rotatetransform centerx = "400" centery = "60" angle = "18"/> <br /> </transformgroup> <br/> </image. rendertransform> <br/> </image> </P> <p> </GRID> <br/>

 

 

 

 

6. compositetransform.

This is a bit like transformgroup, but you can also see that it does not overlay multiple transformations, but also applies multiple transformation methods at the same time, but it is ordered.
Zoom-> twist-> rotate-> shift

 

 

<Grid> <br/> <Image Source = "/transformsample; component/1.jpg" stretch =" Uniform "margin =" 48, 68, 492,131 "/> <br/> <Image Source ="/transformsample; component/1.jpg" stretch = "Uniform" margin = "48, 68, 492,131 "<br/> opacity =" 0.5 "> <br/> <image. rendertransform> <br/> <compositetransform <br/> centerx = "250" centery = "185" <br/> Rotation = "45" <br/> skewx = "15" skewy = "15" <br/> scalex = "1.2" scaley = "1.2" <br/> translatex = "230" translatey = "200"/> <br/> </image. rendertransform> <br/> </image> </P> <p> </GRID>

 

 

 

7. matrixtrasform.

This is the most complex transformation. It is a matrix of 3 multiplied by 3. However, since it is 3rd columns with 0, 0, and 1, we only need to set 6 values. They are:
M11 M12 0
M21 m22 0
Offsetx offsety 1
It may be that offsetx and offsety are relatively easy to see as displacement. What is the first? We can guess that the default value of 1 is scaling, because it cannot be zero times, and the remaining two are the skewed values in the X axis and Y axis.

In fact, I also writeCodeFind the rule, keep the actual parameter unchanged, and change a parameter to observe the changes in the image to find the answer.

M11 -- X-axis Scaling
M12 -- Y axis tilt
M21 -- skew on the X axis
M22 -- Y-axis Scaling
Offsetx -- displacement on the X axis
Offsety -- displacement on the Y axis

 

 

<Grid> <br/> <Image Height = "206" horizontalalignment = "Left" margin = "73,104, 0, 0 "name =" image1 "stretch =" Uniform "verticalignment =" TOP "width =" 139 "Source ="/transformsample; component/1.jpg"> <br/> <image. rendertransform> <br/> <matrixtransform matrix = ","/> <br/> </image. rendertransform> <br/> </image> <br/> <Image Height = "206" horizontalalignment = "Left" margin = "122,424, 136 "name =" image2 "Source ="/transformsample; component/1.jpg" stretch = "Uniform" verticalalignment = "TOP" width = ""> <br/> <image. rendertransform> <br/> <matrixtransform matrix = "1,-137,"/> <br/> </image. rendertransform> <br/> </image> <br/> <Image Height = "206" horizontalalignment = "Left" margin = "293,12, 139 "name =" image3 "Source ="/transformsample; component/1.jpg" stretch = "Uniform" verticalalignment = "TOP" width = ""> <br/> <image. rendertransform> <br/> <matrixtransform matrix = "1, 0.6,"/> <br/> </image. rendertransform> <br/> </image> <br/> <Image Height = "206" horizontalalignment = "Left" margin = "269,424, 139 "name =" image4 "Source ="/transformsample; component/1.jpg" stretch = "Uniform" verticalalignment = "TOP" width = ""> <br/> <image. rendertransform> <br/> <matrixtransform matrix = "1, 1, 1, 0, 0"/> <br/> </image. rendertransform> <br/> </image> <br/> </GRID>

 

How can we learn about transformation? I personally recommend a method that is very effective, that is, chaos.
Really, the learning effect is good.

You can write the code, change the value continuously, and see what changes are there. You will find the rule after several attempts.