Tutorial pintado en iOS

En el presente tutorial vamos a ver de forma sencilla el algoritmo de pintado que utilizamos en Imagina Group & Mono Agency para desarrollar la parte de Educación Infantil de los iCuadernos by Rubio. En esta primera parte simplemente pondremos nuestro lienzo y, sobre él, podremos pintar definiendo de inicio un color y un grosor para nuestro “lápiz”. Para comenzar crearemos un nuevo proyecto de tipo Simple View Application en XCode. En las opciones le daremos el nombre que consideremos, le diremos que no queremos StoryBoards y que tampoco queremos ARC. Además, concretaremos que es sólo para iPad. El código que utilizaremos es usable en iPhone tal cual, pero lo ponemos en iPad simplemente por comodidad y por espacio a la hora de pintar.

IMPORTACIÓN DE FRAMEWORKS
Lo primero que debemos hacer es importar los frameworks que utilizaremos en nuestro proyecto.

 Para ello, como se ve en la imagen, iremos a la pestaña Build Phases dentro de la cabecera de nuestro proyecto. Ahí abriremos “Link binary With Libraries” y añadiremos con el botón “+” OpenGLES.framework y QuartzCore.framework.

Teniendo esto sólo nos queda insertar el import dentro del fichero .h de nuestro UIViewController.

#import <QuartzCore/QuartzCore.h>

CREANDO NUESTRO LIENZO
Para crear nuestro lienzo de dibujo simplemente pondremos un UIViewController encima de nuestra Vista principal.

Para ello, vamos ViewController.xib y arrastramos un UIImageView desde el listado de herramientas hasta nuestra vista. Seguidamente, activaremos el assistant editor (el botón que parece un frac arriba a la derecha en XCode) y, con él, arrastraremos desde nuestro xib con ctrl+click en la nueva UIImageView que añadimos hasta el .h

Esto nos creará el IBOutlet que enlaza.

 Con esto, si ahora ejecutáramos veríamos simplemente una pantalla en blanco en la que no podríamos hacer nada.

DARLE CONTENIDO
Para hacer un pintado sencillo crearemos primero variables para guardar los datos de color, grosor del pincel y la posición de los toques.

Entonces, en el ViewController.h lo dejaremos de la siguiente manera:

01 #import <UIKit/UIKit.h>
02 #import <QuartzCore/QuartzCore.h>
03
04
05 @interface ViewController : UIViewController{
06    float rojo;
07    float verde;
08    float azul;
09    float pincel;
10    
11    // Trazos
12    CGPoint currentPoint;
13    CGPoint previousPoint1;
14 }
15
16 @property (retain, nonatomic) IBOutlet UIImageView *image;
17
18 @end

Ahora, para gestionar el pintado inicializaremos los valores de color y pincel, dentro de viewDidLoad añadiremos el siguiente código

1 pincel = 10.0;
2 rojo = 0.2;
3 verde = 0.3;
4 azul = 0.7;
5
6 image.multipleTouchEnabled = NO;

Y, finalmente, para que todo esto cuadre sobreescribiremos los métodos touchesBegan y touchesMoved con el siguiente código:

01    -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
02 {
03    UITouch *touch = [touches anyObject];
04    
05    previousPoint1 = [touch previousLocationInView:image];
06    currentPoint = [touch locationInView:image];
07    
08    
09 }
10
11
12 -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
13 {
14    UITouch *touch  = [touches anyObject];
15    
16    
17    previousPoint1  = [touch previousLocationInView:image];
18    currentPoint    = [touch locationInView:image];
19    
20    
21    UIGraphicsBeginImageContext(image.frame.size);
22    CGContextRef context = UIGraphicsGetCurrentContext();
23    [image.image drawInRect:CGRectMake(0, 0, image.frame.size.width, image.frame.size.height)];
24    
25    CGContextMoveToPoint(context, previousPoint1.x, previousPoint1.y);
26    
27    CGContextAddLineToPoint(context, currentPoint.x, currentPoint.y);
28  
29    CGContextSetLineCap(context, kCGLineCapRound);
30    CGContextSetLineWidth(context, pincel);
31    CGContextSetRGBStrokeColor(context, rojo, verde, azul, 1.0);
32    CGContextStrokePath(context);
33    
34    image.image = UIGraphicsGetImageFromCurrentImageContext();
35    UIGraphicsEndImageContext();
36 }

En el código lo que hemos hecho básicamente es:

• En touchesBegan hemos inicializado el punto actual y el anterior con los puntos que tiene la vista como tocados.
• Después, en touchesMoved (es decir, cada punto que se mueve nuestro dedo):
• En las líneas 14 a la 18 actualizamos el punto actual y el anterior
• Inicializamos el contexto de pintado en las lineas 21 y 22
• En la 23 pintamos la imagen actual de nuestro UIImageView en el contexto
• Linea 25: nos posicionamos mediante CGContextMoveToPoint en la posición final del paso anterior (es decir, previousPoint)
• A partir de aquí, añadimos una linea con CGContextAddLineToPoint hasta el punto final (currentPoint) en la línea 27
• Después ponemos los valores de la línea (final de línea redondeado, ancho del pincel, color) entre las líneas 29 y 32
• Finalmente, en la línea 34 creamos la imagen a partir del contexto, se la ponemos al ImageView que tenemos en nuestra vista y cerramos el contexto en la 35

Finalmente sólo nos queda ejecutar la aplicación y ver el resultado.

 Extraido de : http://www.imaginaformacion.com/tutoriales/tutorial-pintado-en-ios/