Developer's Diary

28 septiembre, 2010

Tips – Pintar y luego guardar Windows Mobile C# – GDI I

Hace unos días, recibí una duda que tenía medio resuelta respecto al uso de GDI. Sinceramente las librerías gráficas no son mi fuerte, porque requieren de mucho tiempo, aunque las GDI son las que más he usado hasta el momento y vas consiguiendo controlarlas.

Sinceramente desde que programo, el uso de las librerias gráficas ha sido bastante gratificante y la vez engorroso. Me explico.

Llevaba un tiempo querer hacer tips de GDI, que aunque en la red de redes existen bastantes, en ocasiones tienes que coger detalles de un ejemplo y otro que vas encontrando para poder realizar el efecto que deseas.  Hace un par de días atrás, una persona dentro del foro de MSDN realizó una pregunta respecto al uso de estas librerías para lo que quería hacer y ha sido el detonante para que comenzará con estos tips sobre el uso de las GDI.

Antes de comenzar con este primer capitulo de tips, un poco de historia respecto a las GDI por cortesía de la wikipedia.

Si queda alguna duda, yo siempre digo lo siguiente GDI es igual al Paint. Todo lo que podamos hacer con este pequeño programa, lo podemos hacer con la GDI. Si se han llegado a pintar monalisas en el paint, podemos vernos capaces de hacer cualquier cosa.

Tras terminar de aclarar lo que es GDI y el potencial que puede llegar a tener, vamos a pasar a nuestro primer consejo de GDI. Durante este consejo, sabremos pintar líneas simples y posteriormente guardarlas, todo en Windows Mobile. ¿La finalidad? Tener una aplicación de notas rápidas, por ejemplo.

Aquí el código:

using System;
using System.Linq;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

using System.IO;

namespace PruebaGDIPintaryguardar
{
public partial class Form1 : Form
{

//Nuestro lienzo que nos permitirá pintar
private Graphics m_lienzo;

//El “lapiz” le asignamos color y grosor
private Pen m_lapiz = new Pen(System.Drawing.Color.Black, 1);

private int x, y, x2, y2;

public Form1()
{
InitializeComponent();

//Instanciamos con un bitmap para que image no sea null.
pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height);

//Asignamos el valor graphics a nuestra imagen dentro del picture box.
m_lienzo = Graphics.FromImage(pictureBox1.Image); //Hacemos que nuestro lienzo pinte en ese lugar

//Coloreamos de blanco o del color que queramos que se encuentre el fondo. Es necesario que el lapiz concuerde con el color.
m_lienzo.Clear(System.Drawing.Color.White);

//Todas nuestras coordenadas deben ser 0 inicialmente.
x = 0;
y = 0;
x2 = 0;
y2 = 0;

}

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
//Recogemos los valores donde se encuentra nuestro dedo o pincel.
if (x == 0 && y == 0)
{
//Asignamos el primer valor de nuestras coordenadas cuando movemos el ratón
x = e.X;
y = e.Y;
}
else
{
//Asignamos el segundo valor cuando movemos el ratón por segunda vez.
x2 = e.X;
y2 = e.Y;

//Pintamos
Pintar();

//Asignamos el valor segundo a nuestras primeras coordenadas, para respetar la ubicación actual del puntero.
x = x2;
y = y2;

}

//Pintamos.

}

private void Pintar()
{
//Pintamos la línea y refrescamos nuestro picturebox para ver a tiempo real lo que se ha pintado.

m_lienzo.DrawLine(m_lapiz, x, y, x2, y2);
pictureBox1.Refresh();

}

private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{

//Cuando levantamos el puntero, todos los valores vuelven a cero para evitar que la línea comience en un lugar inapropiado.
x = 0;
y = 0;
x2 = 0;
y2 = 0;

}

private void button1_Click(object sender, EventArgs e)
{
//El botón que se encarga de guardar nuestra imagen, con un savefiledialog para elegir la ruta, se puede cambiar por el guardado
//directo.

SaveFileDialog save = new SaveFileDialog();

if (save.ShowDialog() == DialogResult.OK)
{

Image imagen = pictureBox1.Image;
string archivo = save.FileName + “jpg”;
System.Drawing.Imaging.ImageFormat formato = System.Drawing.Imaging.ImageFormat.Jpeg;

imagen.Save(archivo, formato);
}

}

}
}

El código esta formado por un formulario, con un botón y un picturebox. No hace falta nada más. Aún así aquí teneis el proyecto para que podais echarle un vistazo desde aquí.

Saludos y espero que os sea de utilidad.

Anuncios

2 comentarios »

  1. De mucha utilidad, pero la imagen no se repinta, tengo que pulsar otro control para que me muestre lo que estoy pintando. Saludos.

    Comentario por Pablo — 17 febrero, 2012 @ 11:01 AM

    • Muchas gracias Pablo. Prueba a poner un .Refresh() cuando tocas en otro control esa es la operación que se realiza automáticamente.
      Pruébalo y me cuentas
      Saludos

      Comentario por 3nk1 — 17 febrero, 2012 @ 7:11 PM


RSS feed for comments on this post. TrackBack URI

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

A %d blogueros les gusta esto: