Vanguarsoft Developers blog

Ing. Javier Leal -Desarrollador CPANAX C.A / Microsoft Student Partners – VENEZUELA

Dibujar Figuras en Canvas con el Mouse

Deja un comentario

Buen día amigos Internautas tiempo sin publicar artículos técnico, eh esta do trabajando en algunos proyectos y uno mismo al investigar y buscar se da cuenta donde hace falta documentar y donde hay suficiente información, por ello este articulo bastante sencillo pero muy útil si quieres crear una herramienta que dibuje figuras o cuando requieres resaltar una posición de una imagen y objeto.

Cada programador busca una funcionalidad especifica para utilizarla en cualquier tipo de funcionalidad.

Empezamos…

Primero que nada colocaremos un Canvas en nuestro proyecto, como muchos saben un canvas es un lienzo de posicionamiento absoluto que utiliza coordenadas X y Y para situar a los objetos que contiene dentro.

Primero que nada Dibuja un Canvas en tu App es importante que tenga un tamaño fijo y no que se autoajuste a ningún objeto, colocarle un color para poder Distinguirlo y si lo desea así como lo coloque yo un Cursor.

<Canvas  Width=”1000″ Height=”700″ x:Name=”LienzoClave” Background=”White” Cursor=”Stylus” />

A este objeto Canvas le crearemos 3 Eventos

MouseLeftButtonDown = Se ejecuta al presionar el Botón derecho sobre el objeto

MouseMove = Se ejecuta cuando el Mouse esta en Movimiento sobre el objeto

MouseLeftButtonUp = Cuanto se Suelta el botón derecho de mouse sobre el objeto

<Canvas Margin=”10″ Width=”1000″ Height=”700″ x:Name=”LienzoClave” Background=”White” MouseLeftButtonDown=”LienzoClave_MouseLeftButtonDown”  MouseLeftButtonUp=”LienzoClave_MouseLeftButtonUp” MouseMove=”LienzoClave_MouseMove” Cursor=”Stylus” />

Vamos ahora a programar cada uno de los eventos:

Declaramos una variable Global llamada Move de Tipo Bool, con su valor por defecto False, además de dos Mas de Tipo Double llamadas TopPosition y LeftPosition.

double topPosition;
double leftPosition;
bool Move = false;

private void LienzoClave_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
        LienzoClave.Children.Clear();

        Point point = e.GetPosition(LienzoClave);
topPosition = point.Y;
leftPosition = point.X;
Move = true;
}

En resumen lo que hace este código es limpiar el Canvas de todos los objetos que tenga dentro, luego capturar la posición del mouse en el canvas según sus coordenadas X y Y, Esas coordenadas las almacenamos en las Variables Globales TopPosition y LeftPosition

Teniendo Click sostenido vamos a comenzar a dibujar la figura. y es donde entra el juego el MouseMove para este evento declaramos 3 variables globales que utilizaremos WidthDesing, HeightDesing ambos de Tipo Double y rec de tipo Rectagle.

private void LienzoClave_MouseMove(object sender, MouseEventArgs e)
{
if (Move)
{
Point p = e.GetPosition(LienzoClave);
WidthDesing = p.X – leftPosition;
HeightDesing = p.Y – topPosition;
LienzoClave.Children.Clear();
if (WidthDesing < 0 || HeightDesing<0)
{ }
else
{

            rec = new Rectangle();
rec.Fill = new SolidColorBrush(Colors.Blue);

            rec.Width = Convert.ToInt32(WidthDesing);
rec.Height = Convert.ToInt32(HeightDesing);
Canvas.SetLeft(rec, leftPosition);
Canvas.SetTop(rec, topPosition);

            LienzoClave.Children.Add(rec);
}
}
}

 

 

Pueden ver en este Código se valida si el Valor Bool Move es Activo para que este código no se ejecute sin haber presionado el click, se captura de nuevo la posición del mouse, que a medida que mueve cambian las posiciones y se hace una resta entre las posiciones actuales menos el punto de partida eso resultaría dar el ancho y alto de lo que se esta dibujando y se almacenan en otras Variables Globales llamada WithDesing y HeightDesing.

Limpiamos el lienzo completamente, verificamos que los valores anteriores no sean menores de 0 por que daría error, Inicializamos el objeto rectángulo declarado a nivel global, se le coloca un color al rectángulo, Y se le asigna la posición que ocupara en el canvas y su ancho y alto y lo dibuja, esto se ejecutara mientras tengamos presionado click y se mueva el mouse en el objeto.

Finalmente el ultimo Evento para que nuestro objeto quede dibujado.

private void LienzoClave_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Move = false;
}

Acá una imagen y espero sea útil pronto otros detalles no editar el objeto dibujado, obviamente tu eliges que dibujar.. un rectángulo hice yo en este caso pero hay muchas formas.

DIBUJARENCANVAS

Autor: Ing. Javier J. Leal H.

Desarrollador en CPANAX C.A, Microsoft Student Partners de Venezuela Amantes de nuevas Tecnologías Desarrollador es Silverlight 5, Windows 8, Windows Phone, Influenciador y Orador en Actividades Tecnológicas Microsoft

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s