Mostrando las entradas con la etiqueta PictureBox. Mostrar todas las entradas
Mostrando las entradas con la etiqueta PictureBox. Mostrar todas las entradas

viernes, 26 de septiembre de 2014

El Demo del Día: Visor de Imágenes con Zoom en WinForms

Visor de Imágenes con Zoom en WinForms

Este post es a pedido de un alumno que quiere una aplicación en Windows Forms que muestre una secuencia de Imágenes y pueda realizar el Zoom.

Crear la Aplicación Windows Forms

Primero crearemos una aplicación en Windows Forms en C# llamada: "VisorImagenesZoom".
Cambiar de nombre al formulario por el de "frmVisor", luego diseñar la pantalla como se muestra en la siguiente figura:


Nota: También hay que incluir un Timer llamado "tmrPreview" que cada 3 segundos muestre las imágenes del directorio seleccionado.

Escribir el siguiente código en el formulario:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;
using System.IO;

namespace VisorImagenesZoom
{
    public partial class frmVisor : Form
    {
        private int c;
        private int n;
        private Point punto1;

        public frmVisor()
        {
            InitializeComponent();
        }

        private void abrirDirectorio(object sender, EventArgs e)
        {
            FolderBrowserDialog fbd = new FolderBrowserDialog();
            if (fbd.ShowDialog().Equals(DialogResult.OK))
            {
                txtDirectorio.Text = fbd.SelectedPath;
                IEnumerable<string> archivos = Directory.EnumerateFiles(fbd.SelectedPath, "*.jpg");
                lstArchivo.Items.Clear();
                lstArchivo.BeginUpdate();
                foreach (string archivo in archivos)
                {
                    lstArchivo.Items.Add(Path.GetFileNameWithoutExtension(archivo));
                }
                lstArchivo.EndUpdate();
                txtTotalArchivos.Text = lstArchivo.Items.Count.ToString();
                tmrPreview.Enabled = true;
                tmrPreview.Start();
            }
        }

        private void mostrarImagenes(object sender, EventArgs e)
        {
            lstArchivo.SelectedIndex = c;
            string archivo = Path.Combine(txtDirectorio.Text, lstArchivo.Items[c].ToString() + ".jpg");
            picPreview.LoadAsync(archivo);
            c++;
            if (c == lstArchivo.Items.Count) c = 0;
        }

        private void configurarZoom(object sender, MouseEventArgs e)
        {
            if (e.Button.Equals(MouseButtons.Left))
            {
                if (n == 0)
                {
                    punto1 = e.Location;
                    tmrPreview.Stop();
                    tmrPreview.Enabled = false;
                }
                else
                {
                    if (n == 1)
                    {
                        Point punto2 = e.Location;
                        string archivo = Path.Combine(txtDirectorio.Text,
                                                   lstArchivo.Items[c].ToString() + ".jpg");
                        Bitmap bmp = new Bitmap(picPreview.Image);
                        Bitmap bmpZoom = new Bitmap(bmp.Width, bmp.Height);
                        Graphics g = Graphics.FromImage(bmpZoom);
                        float ratioX = (bmp.Width/picPreview.Width);
                        float ratioY = (bmp.Height / picPreview.Height);
                        int posX = (int)(ratioX * punto1.X);
                        int posY = (int)(ratioY * punto1.Y);
                        int ancho = (int)(ratioX*(punto2.X-punto1.X));
                        int alto = (int)(ratioY * (punto2.Y - punto1.Y));
                        Rectangle srcRect = new Rectangle(posX, posY, ancho, alto);
                        Rectangle dstRect = new Rectangle(0, 0, bmpZoom.Width, bmpZoom.Height);
                        g.DrawImage(bmp, dstRect, srcRect, GraphicsUnit.Pixel);
                        picPreview.Image = bmpZoom;
                        tmrPreview.Enabled = true;
                        tmrPreview.Start();
                    }
                }
                n++;
                if (n == 2) n = 0;
            }
        }
    }
}

Nota: Para programar el Zoom se ha asociado al evento MouseClick del PictureBox llamado "picPreview" donde en el primer clic se captura la ubicación del punto y se guarda en una variable "punto1" y en el segundo clic se captura el punto2 y se crea un rectangulo con la imagen para el Zoom. Solo hay que tener en cuenta que el Rectangulo debe ser en base a la imagen (Bitmap) del PictureBox y No al tamaño del control (con propiedad SizeMode en StrechImage), por lo cual se crea las variables ratios.

Probar la Aplicación Creada

Grabar el proyecto y ejecutarlo con F5. Seleccionar un directorio donde se encuentren archivos jpg y se mostraran en la lista tal como aparece en la siguiente figura:


Cada 3 segundos cambiara la imagen y se seleccionara en la lista el archivo que se esta mostrando, dar el primer clic sobre la imagen y luego el segundo clic mostrará el preview de la imagen, tal como sigue:


Comentario Final

En este post hemos visto como mostrar una secuencia de imágenes usando un Timer y también como realizar el Zoom de una Imagen usando el método DrawImage de la clase Graphics para dibujar un rectángulo con la imagen especificada al dar dos clics, uno para marcar el punto de inicio y otro para marcar el punto final.

Descarga:
Demo19_VisorImagenesZoom



martes, 17 de junio de 2014

El Demo del Día: Animación usando Sprites en Windows Forms

Animación usando Sprites en Windows Forms

El Demo de hoy es una animación en Windows Forms usando un sprite o archivo con una secuencia de imagenes. Los sprites permiten reducir el numero de accesos a archivos para una aplicación que trabaja con imagenes, sobre todo es muy usado en los juegos.

Paso 1: Archivo con el Sprite a Animar

En este ejemplo tenemos un archivo llamado "Caminante.jpg" que tiene 3 filas x 6 columnas, es decir 18 cuadros, pero en este caso solo hay 14 imágenes diferentes. La primera fila tiene 6 imágenes con posiciones hacia la derecha y la segunda fila tiene 6 imágenes con posiciones hacia la izquierda.
El archivo tiene una dimensión de 624 x 450 pixeles por lo que cada imagen seria de 104 de ancho por 150 de alto.



Paso 2: Diseño del Formulario Windows Forms en .NET

Debemos crear una Aplicación en C# para Windows Forms llamada: "Animacion_Sprite" y renombrar el formulario a "frmCaminante".
Primero agregar un control PictureBox llamado "picCaminante" de tamaño "50x50", luego 2 controles RadioButton: "rbDerecha" y "rbIzquierda".
Finalmente, agregar un Timer llamado: "tmrAnima" con la propiedad Enable en "true" y el Interval en "100" milisegundos, tal como se muestra en la figura:



Paso 3: Código del Formulario en C# .NET

Escribir el siguiente código en el formulario, la función cargarImagen esta asociada al evento "load" del formulario y la función "animarCaminante" esta asociado al evento "Tick" del Timer. Además la función "caminarDerecha" esta asociada al radio button "rbDerecha" y la función: "caminarIzquierda" esta asociada al radio button "rbIzquierda".

    public partial class frmCaminante : Form
    {
        Bitmap bmp;
        Rectangle rect;
        int posX,posY,x,c;

        public frmCaminante()
        {
            InitializeComponent();
        }

        private void cargarImagen(object sender, EventArgs e)
        {
            bmp = new Bitmap("Caminante.png");          
        }

        private void animarCaminante(object sender, EventArgs e)
        {
            rect = new Rectangle(posX, posY, 104, 150);
            picCaminante.Image = bmp.Clone(rect, bmp.PixelFormat);
            if (rbDerecha.Checked) animarDerecha();
            if (rbIzquierda.Checked) animarIzquierda();
        }

        private void animarDerecha()
        {
            posX += 104;
            c++;
            picCaminante.Left = x;
            if (x <= this.Width) { x += 10; }
            else { x = -picCaminante.Width; }
            if (c == 5)
            {
                c = 0;
                posX = 104;
            }
        }

        private void animarIzquierda()
        {
            posX += 104;
            c++;
            picCaminante.Left = x;
            if (x>-picCaminante.Width) { x -= 10; }
            else { x = this.Width; }
            if (c == 5)
            {
                c = 0;
                posX = 104;
            }
        }

        private void caminarDerecha(object sender, EventArgs e)
        {
            if (rbDerecha.Checked)
            {
                c = 0;
                posX = 104;
                posY = 0;
            }
        }

        private void caminarIzquierda(object sender, EventArgs e)
        {
            if (rbIzquierda.Checked)
            {
                c = 0;
                posX = 104;
                posY = 150;
            }
        }
    }

Paso 4: Ejecución del Formulario Windows Forms

Después de escribir el código de arriba, crear el archivo: "Caminante.jpg" en la carpeta bin/Debug de la aplicación y ejecutar pulsando F5. Por defecto la animación se inicia a la derecha, para cambiar seleccionar el radio button.


Descarga:
Demo04_Animacion_Sprite