paulo.arancibia

Hoy veremos cómo rotar elementos en Silverlight 1.0, comenzaremos viendo el código XAML.

<Image Width=“485“ Height=“352“ Canvas.Top=“0“ Canvas.Left=“0“ Source=“images/control.png“/>

<Canvas x:Name=“rotateCanvasDial“ Width=“190“ Height=“190“ Canvas.Left=“180.554“ Canvas.Top=“99.313“ Background=“Transparent“ RenderTransformOrigin=“0.5,0.5“ Canvas.ZIndex=“1“>

<Canvas.RenderTransform>

<TransformGroup>

<RotateTransform x:Name = “canvasRotateDial“ CenterX=“0“ CenterY=“0“ Angle=“0“/>

</TransformGroup>

</Canvas.RenderTransform>

<Image x:Name=“dial“ Width=“190“ Height=“190“ Canvas.Left=“0“ Canvas.Top=“0“ Stretch=“Fill“ Source=“images/dial.png“/>

<Ellipse MouseMove=“rotateMouseMove“ MouseLeftButtonDown=“rotateMouseDown“ MouseLeftButtonUp=“rotateMouseUp“ Cursor=“Hand“ x:Name=“rotateHandleDial“ Width=“190“ Height=“190“ Fill=“Transparent“ Canvas.Left=“0“ Canvas.Top=“0“/>

</Canvas>

En primera instancia creamos un Canvas con una RotateTransform que será la encargada de girar el elemento, luego agregamos una imagen que será el elemento visual a rotar y una elipse que lo cubre, a esta elipse le agregue tres eventos MouseMove, MouseLeftButtonDown y MouseLeftButtonUp.

En la parte JavaScript, lo primero que haremos será declarar unas variables para diferentes parámetros que luego utilizaremos.

var lastPosition = 0;

var beginAngle = 0;

var isMouseDown = false;

var rotateCanvasName;

var rotateTransformName;

var imageZIndex = 0;

var rotateZIndex = 1;

En el evento MouseLeftButtonUp ,cambiamos el valor de la variable rotateMouseUp y liberamos al mouse.

function rotateMouseUp(sender, args)

{

isMouseDown = false;

sender.releaseMouseCapture();

}

En MouseLeftButtonDown, activamos la captura del mouse, cambiamos el valor de la variable isMouseDown y registramos la última posición del cursor del mouse.

function rotateMouseDown(sender, args)

{

sender.captureMouse();

isMouseDown = true;

lastPosition = args.getPosition(null);

objectName = sender.name;

rotateCanvasName = “rotateCanvasDial”;

rotateTransformName = “canvasRotateDial”;

}

Por último en el evento MouseMove capturamos la posición actual del cursor, seleccionamos la RotateTransform a utilizar, calculamos el CenterPoint y el ángulo dependiendo de los movimientos del mouse.

function rotateMouseMove(sender, args)

{

var position = args.getPosition(null);

if (isMouseDown)

{

var rotate = sender.findName(rotateTransformName);

var centerPoint = {};

canvasLeft = sender.findName(rotateCanvasName)["Canvas.Left"];

canvasTop = sender.findName(rotateCanvasName)["Canvas.Top"];

canvasWidth = sender.findName(rotateCanvasName).width;

canvasHeight = sender.findName(rotateCanvasName).height;

centerPoint.X = canvasLeft + canvasWidth/2;

centerPoint.Y = canvasTop + canvasHeight/2;

var radiansToDegrees = 360 / (2 * Math.PI);

var lastAngle = parseInt(Math.atan2(lastPosition.Y - centerPoint.Y, lastPosition.X - centerPoint.X) * radiansToDegrees);

var currentAngle = parseInt(Math.atan2(position.Y - centerPoint.Y, position.X - centerPoint.X) * radiansToDegrees);

var deltaAngle = currentAngle - lastAngle;

rotate.Angle += deltaAngle;

beginAngle += deltaAngle;

lastPosition = position;

}

}

Al ejecutar nuestro ejemplo se debería de ver como en la siguiente imagen.