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:

Ve a la pestaña Build Phases dentro de la cabecera de tu proyecto.
Abre "Link binary With Libraries".
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:

Abre el archivo ViewController.xib.
Arrastra un UIImageView desde el listado de herramientas hasta la vista principal.
Activa el assistant editor (el botón que parece un frac arriba a la derecha en XCode).
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.

Paso 4: Crear el lienzo de dibujo

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

Abre el archivo ViewController.xib.

Arrastra un UIImageView desde el listado de herramientas hasta la vista principal.

Activa el assistant editor (el botón que parece un frac arriba a la derecha en XCode).

Arrastra desde el xib con ctrl+click en la nueva UIImageView hasta el .h para crear el IBOutlet que enlaza.

#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

(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();
}

¡Listo para probarlo!

Algoritmo de Pintado de iOS en iCuadernos by Rubio

Descrubre el algoritmo de pintado en iCuadernos by Rubio

Paso 1: Crear un nuevo proyecto en XCode

Paso 2: Importar los frameworks necesarios

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

Paso 4: Crear el lienzo de dibujo

Descubre la formación a tu medida

Paso 5: Inicializar los valores de pintado

Paso 6: Gestión del pintado

¡Listo para probarlo!

Descubre la formación a tu medida

Descubre la formación a tu medida

¡Empieza hoy y conviértete en un experto en iOS 16!

Tutoriales relacionados

¿Qué es el Patrón de Arquitectura (MVVM)?

Cómo Crear una Progressive Web App (PWA) con Ionic

Cómo Instalar QR Scanner en Aplicación Ionic

Algoritmo de Pintado de iOS en iCuadernos by Rubio

Descrubre el algoritmo de pintado en iCuadernos by Rubio

Paso 1: Crear un nuevo proyecto en XCode

Paso 2: Importar los frameworks necesarios

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

Paso 4: Crear el lienzo de dibujo

Descubre la formación a tu medida

Paso 5: Inicializar los valores de pintado

Paso 6: Gestión del pintado

¡Listo para probarlo!

Descubre la formación a tu medida

Descubre la formación a tu medida

¡Empieza hoy y conviértete en un experto en iOS 16!

Tutoriales relacionados

¿Qué es el Patrón de Arquitectura (MVVM)?

Cómo Crear una Progressive Web App (PWA) con Ionic

Cómo Instalar QR Scanner en Aplicación Ionic