Windows Phone development (19): 3D fluoroscopy Effect

A three-dimensional effect can also be called a perspective effect. Therefore, I simply call it a three-dimensional perspective effect. I have less theoretical knowledge. Let's open the example directly. Because the three-dimensional effect is actually very simple, it is easier than the transformation in the previous section. Don't believe it? Let's do the exercises together.

Exercise 1: rotate the object 45 degrees along the Y axis.

By default, the center of rotation is in the center position, such as the Y axis center. As for the rotation angle, which direction is positive and which direction is negative, you can try it yourself. I believe you can understand it. Otherwise, Hello Kitty will laugh at you.

Okay, because this is the first exercise, let's talk about where X, Y, and Z axes are. Needless to say, the X axis is placed horizontally. What about the Y axis, of course it is vertical. What about the Z axis? Guess? If you know that these three axes are vertical to each other, you can guess where they are? Not displayed on the graph? Why?
Yes, the Z axis points to you. How can you see it? That's right for you. So, in 3D perspective, if you want to pull the object a little farther, set the Z value to a little smaller. If you want the object to be "closer" to you, set the translation value of Z to a larger value. I don't know. The Z axis is also called the "intimacy Index.

Simply using the planeprojection class, you can easily complete the perspective effect. If you need a complex 3D model, you must have a very powerful spatial thinking ability, we recommend that you use other 3D modeling software such as 3D MAX. Express blend supports import. For complex 3D models, we recommend that you use express blend for graphical operations. This is more intuitive. Of course, if you use the planeprojection class, it is unnecessary because it is relatively simple.

Well, now let's make a 45 degree rotation of the object along the X axis, that is, the effect of the above image. Of course, the planeprojection class can be used in many UI elements, not necessarily images, in order to be intuitive and beautiful, I used images and found two mm to enjoy the fun.

<Image Source = "1.jpg" stretch =" Uniform "horizontalalignment =" center "verticalignment =" center "<br/> width =" 320 "> <br/> <image. projection> <br/> <planeprojection rotationy = "45"/> <br/> </image. projection> <br/> </image>

 

OK, it's that simple. Maybe there is no effect in the designer. It doesn't matter. You press F5 now and you will see a miracle.

Here I will remind you that all UI elements use the same method for planeprojection. The following example shows how to set the projection attribute of an object.
.

 

Exercise 2: Rotate-60 degrees along the X axis.

<Image Source = "1.jpg" stretch =" Uniform "horizontalalignment =" center "verticalignment =" center"
Width = "320">
<Image. Projection>
<Planeprojection rotationx = "-60"/>
</Image. Projection>
</Image>

It is no different from above, but y is changed to X.

 

 

 

Exercise 3: rotate 180 degrees along the Z axis.

<Image Source = "1.jpg" stretch =" Uniform "horizontalalignment =" center "verticalignment =" center"
Width = "320">
<Image. Projection>
<Planeprojection rotationz = "180"/>
</Image. Projection>
</Image>

 

As I said just now, the Z axis points to you. Maybe this is obvious. Now you change it to 35 degrees, and I believe the effect is obvious.
<Image Source = "1.jpg" stretch =" Uniform "horizontalalignment =" center "verticalignment =" center"
Width = "320">
<Image. Projection>
<Planeprojection rotationz = "35"/>
</Image. Projection>
</Image>

 

 

 

Exercise 4: comprehensive rotation.

In the preceding example, a single axis is rotated. Can X, Y, and Z work simultaneously? Of course you can, XYZ, work is not tired!

Now, let's take the object 15 degrees along the X axis, rotate-65 degrees along the Y axis, and rotate 40 degrees along the Z axis to see what will happen?

<Image Source = "1.jpg" stretch =" Uniform "horizontalalignment =" center "verticalignment =" center"
Width = "320">
<Image. Projection>
<Planeprojection
Rotationx = "15"
Rotationy = "-65"
Rotationz = "40"/>
</Image. Projection>
</Image>

 

 

 

 

Exercise 5: Change the center position.

By default, the center point is located in the middle of the object, but we can change the center position through three attributes: centerofrotationx, centerofrotationy, and centerofrotationz. The value ranges from 0 to 1, with two extremes, if the value is between 0 and 1, it is calculated proportionally. For example, 0.5 is the default center position.

Next, we will change the center of the X axis to 0.2, the center of the Y axis to 0.7, and the center of the Z axis to 1 to see what happened.

<Image Source = "1.jpg" stretch =" Uniform "horizontalalignment =" center "verticalignment =" center"
Width = "320">
<Image. Projection>
<Planeprojection
Rotationx = "15"
Rotationy = "-65"
Rotationz = "40"
Centerofrotationx = "0.2"
Centerofrotationy = "0.7"
Centerofrotationz = "1"/>
</Image. Projection>
</Image>

 

 

Obviously, the location is not in the middle. Take a closer look and you will find it.

 

 

Exercise 6: Local offset.

The Local translation I am talking about is just relative to screen translation. In fact, this translation is a bit hard to hear. There are also three properties involved: localoffsetx, localoffsety, and localoffsetz. I believe you don't need to talk about it. You can just take a few minutes to understand it. The key is more hands-on and comparison.

<Image Source = "2.jpg" stretch =" Uniform"
Horizontalalignment = "center"
Verticalalignment = "center"
Height = "300">
<Image. Projection>
<Planeprojection
Localoffsetx = "12"
Localoffsety = "5"
Localoffsetz = "24"
Rotationx = "10"
Rotationy = "-30"
Rotationz = "-25"/>
</Image. Projection>
</Image>

 

 

 

 

 

Exercise 7: global offset.

This global offset is the moving screen coordinate. If you want to summarize it, you will find that it is the same as the coordinate system translation in the resolution ry.
That is, add to the left and right minus and add to the bottom minus.
You can constantly change the value for testing. I believe you will find the regular expression. Don't worry, Hello Kitty will encourage you.

<Image Source = "2.jpg" stretch =" Uniform"
Horizontalalignment = "center"
Verticalalignment = "center"
Height = "300">
<Image. Projection>
<Planeprojection
Globaloffsetx = "8"
Globaloffsety = "55"
Globaloffsetz = "800"
Rotationx = "10"
Rotationy = "-30"
Rotationz = "-25"/>
</Image. Projection>
</Image>

 

 

Studying this perspective effect is still an old method-chaos, constantly using numerical values for testing, think about it, sometimes chaos is very valuable.