Algoritmo de Pintado en iCuadernos by Rubio | Pintando en iOS

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:

#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:

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface ViewController : UIViewController {
    float rojo;
    float verde;
    float azul;
    float pincel;
    CGPoint currentPoint;
    CGPoint previousPoint1;
}

@property (retain, nonatomic) IBOutlet UIImageView *image;

@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:

pincel = 10.0;
rojo = 0.2;
verde = 0.3;
azul = 0.7;
image.multipleTouchEnabled = NO;

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

(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    previousPoint1 = [touch previousLocationInView:image];
    currentPoint = [touch locationInView:image];
}

(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    previousPoint1 = [touch previousLocationInView

:image];
    currentPoint = [touch locationInView:image];

    UIGraphicsBeginImageContext(image.frame.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [image.image drawInRect:CGRectMake(0, 0, image.frame.size.width, image.frame.size.height)];
    CGContextMoveToPoint(context, previousPoint1.x, previousPoint1.y);
    CGContextAddLineToPoint(context, currentPoint.x, currentPoint.y);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, pincel);
    CGContextSetRGBStrokeColor(context, rojo, verde, azul, 1.0);
    CGContextStrokePath(context);
    image.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
}

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.