Algoritmo de Pintado de iOS en iCuadernos by Rubio

Descrubre el algoritmo de pintado en iCuadernos by Rubio

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.

Paso 1: Crear un nuevo proyecto en XCode

Para comenzar, crearemos un nuevo proyecto de tipo Simple View Application en XCode. Asegúrate de seguir estas opciones:

• Nombre del proyecto: [nombre del proyecto]
• StoryBoards: No
• ARC: No
• Dispositivo: Solo para iPad

Paso 2: Importar los frameworks necesarios

El siguiente paso es importar los frameworks que utilizaremos en nuestro proyecto. Sigue estos pasos:

1. Ve a la pestaña Build Phases dentro de la cabecera de tu proyecto.
2. Abre "Link binary With Libraries".
3. Añade los siguientes frameworks con el botón "+": OpenGLES.framework y QuartzCore.framework.

Paso 3: Insertar la importación en el fichero .h

Para utilizar los frameworks importados, necesitamos insertar la siguiente línea de código dentro del fichero .h de nuestro UIViewController:

1#import <QuartzCore/QuartzCore.h>

Paso 4: Crear el lienzo de dibujo

En este paso, crearemos nuestro lienzo de dibujo en un UIViewController. Sigue estos pasos:

1. Abre el archivo ViewController.xib.
2. Arrastra un UIImageView desde el listado de herramientas hasta la vista principal.
3. Activa el assistant editor (el botón que parece un frac arriba a la derecha en XCode).
4. Arrastra desde el xib con ctrl+click en la nueva UIImageView hasta el .h para crear el IBOutlet que enlaza.

Paso 5: Inicializar los valores de pintado

Para poder realizar un pintado sencillo, debemos crear variables para guardar los datos de color, grosor del pincel y la posición de los toques. Añade el siguiente código dentro del ViewController.h:

1#import <UIKit/UIKit.h>
2#import <QuartzCore/QuartzCore.h>
3
4@interface ViewController : UIViewController {
5    float rojo;
6    float verde;
7    float azul;
8    float pincel;
9    CGPoint currentPoint;
10    CGPoint previousPoint1;
11}
12
13@property (retain, nonatomic) IBOutlet UIImageView *image;
14
15@end

Paso 6: Gestión del pintado

En este paso, gestionaremos el pintado inicializando los valores de color y pincel. Dentro del método viewDidLoad, añade el siguiente código:

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

Además, sobreescribiremos los métodos touchesBegan y touchesMoved con el siguiente código:

1(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
2    UITouch *touch = [touches anyObject];
3    previousPoint1 = [touch previousLocationInView:image];
4    currentPoint = [touch locationInView:image];
5}
6
7(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
8    UITouch *touch = [touches anyObject];
9    previousPoint1 = [touch previousLocationInView
10
11:image];
12    currentPoint = [touch locationInView:image];
13
14    UIGraphicsBeginImageContext(image.frame.size);
15    CGContextRef context = UIGraphicsGetCurrentContext();
16    [image.image drawInRect:CGRectMake(0, 0, image.frame.size.width, image.frame.size.height)];
17    CGContextMoveToPoint(context, previousPoint1.x, previousPoint1.y);
18    CGContextAddLineToPoint(context, currentPoint.x, currentPoint.y);
19    CGContextSetLineCap(context, kCGLineCapRound);
20    CGContextSetLineWidth(context, pincel);
21    CGContextSetRGBStrokeColor(context, rojo, verde, azul, 1.0);
22    CGContextStrokePath(context);
23    image.image = UIGraphicsGetImageFromCurrentImageContext();
24    UIGraphicsEndImageContext();
25}

En el código, hemos inicializado los puntos actual y anterior en touchesBegan, y en touchesMoved actualizamos los puntos y realizamos el pintado en el contexto.

¡Listo para probarlo!

Ahora solo nos queda ejecutar la aplicación y ver el resultado. En siguientes tutoriales iremos viendo cómo suavizar las líneas, cómo borrar y añadir botones para cambio de color, entre otras características. Mientras tanto, puedes conocer las características de la aplicación de iCuadernos by Rubio.