Silverlight & Blend Animation Design Series 12:3 angular function (trigonometry) Animation free rotation (free-form rotation)

When it comes to the rotation of objects, it may be reminiscent of the concept of object angles. The rotation implementation of the object is actually a position transformation using the angle change of the object, in the "Silverlight & Blend Animation Design Series II: Rotation animation (RotateTransform)" In the article on the object of the different angle transformation of the implementation of the introduction, The free Spins (free-form rotation) introduced in this article are described in the example project in Function Silverlight 3 Animation, please read this article for details.

To achieve free rotation is very simple and requires special attention to four points, which rotate the object, the center point of rotation, the angle of rotation and the focus of rotation. It can be simply understood that when you click on a point on an object, you can rotate the object by its unequal angle, whichever is the center point. For ease of control, the rotation focus is typically designed to be a relatively prominent UI rendering, as shown in:

　　　　　　　　

UI is designed as a standalone UserControl, the corresponding XAML is defined as follows:

<usercontrol x:class= "Imagerotate.rotateitem"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
Width= "height=" >
<canvas x:name= "Itemcanvas" width= "from" "Height=" canvas.left= "" "" canvas.top= "" "Background=" #FFFFFFFF "
rendertransformorigin= "0.5,0.5" >
<Canvas.RenderTransform>
<TransformGroup>
<rotatetransform x:name= "Rotateitemcanvas" angle= "0"/>
</TransformGroup>
</Canvas.RenderTransform>
<image x:name= "Image" width= "canvas.left=" canvas.top= "source=" "stretch="/> "height="
<ellipse x:name= "Handle" width= "All" height= "fill=" #FFEAFF00 "stroke=" #FF000000 "canvas.left=" 313 "canvas.top=" 233 "/>
</Canvas>
</UserControl>

Analysis of the above XAML can be known that the entire interface through a coordinate-based canvas layout, the default layout container rotation angle of 0 degrees, in the canvas placed a picture as a Rotatable object appearance, a circle as the rotation focus. The final implementation of the rotation function is the mouse on the Ellipse object of the event application, through the event handler function to change the entire layout container rotation angle (Angle).

private bool ismousecaptured;
Private point mouseposition;
Private point lastposition;
Public point Canvascenter;
Private double lastangle;
Private double currentangle;
Private double Angledelta;

Public Rotateitem ()
{
InitializeComponent ();
Registering mouse events for ellipse objects
Handle.mouseleftbuttondown + = new Mousebuttoneventhandler (Handle_mouseleftbuttondown);
Handle.mouseleftbuttonup + = new Mousebuttoneventhandler (handle_mouseleftbuttonup);
Handle.mousemove + = new MouseEventHandler (handle_mousemove);
}

private void Handle_mouseleftbuttonup (object sender, MouseButtonEventArgs e)
{
FrameworkElement Item = sender as FrameworkElement;
Item.releasemousecapture ();
Ismousecaptured = false;
Item.cursor = null;
}

private void Handle_mouseleftbuttondown (object sender, MouseButtonEventArgs e)
{
FrameworkElement Item = sender as FrameworkElement;
Item.capturemouse ();
Item.cursor = Cursors.hand;
Ismousecaptured = true;
Lastposition = E.getposition (null);
}

The most critical is the MouseMove event, in the MouseMove event processing function, by calculating the coordinates of the mouse point and the current coordinates of the arc conversion angle calculation, the resulting angle value is set to the rotation angle of the canvas to achieve the free rotation of the object.

　　　　　　　　

The following is a calculation formula for converting radians to angles and the implementation of the MouseMove event algorithm:

<summary>
Convert radians to angles
</summary>
<param name= "Radians" ></param>
<returns></returns>
Private double radianstodegrees (double Radians)
{
return Radians * 180/MATH.PI;
}

private void Handle_mousemove (object sender, MouseEventArgs e)
{
MousePosition = E.getposition (null);

if (ismousecaptured)
{
Lastangle = Math.atan2 (Lastposition.y-canvascenter.y, lastposition.x-canvascenter.x);
Currentangle = Math.atan2 (Mouseposition.y-canvascenter.y, mouseposition.x-canvascenter.x);
Angledelta = Currentangle-lastangle;
Rotateitemcanvas.angle + = Radianstodegrees (Angledelta);
Lastposition = mouseposition;
}
}

rotatable UserControl complete code

It is also very simple to use, dynamically create the UserControl created above and then add it to the main container control, as shown in the following demo code:

public partial class Mainpage:usercontrol
{
Public MainPage ()
{
InitializeComponent ();

var Picture1 = new Rotateitem ();
Picture1.Image.Source = new BitmapImage (New Uri ("Marigold.jpg", urikind.relative));
Picture1.setvalue (Canvas.leftproperty, 100.00);
Picture1.setvalue (Canvas.topproperty, 100.00);
Picture1.canvascenter.x = (double) picture1.getvalue (canvas.leftproperty) + PICTURE1.WIDTH/2;
Picture1.canvascenter.y = (double) picture1.getvalue (canvas.topproperty) + PICTURE1.HEIGHT/2;
Picture1.RotateItemCanvas.Angle =-15;
LAYOUTROOT.CHILDREN.ADD (Picture1);
}
}

Silverlight & Blend Animation Design Series 12:3 angular function (trigonometry) Animation free rotation (free-form rotation)