imagina pictogramaImagina Formación

Algoritmo de Pintado de iOS en iCuadernos by Rubio

Escrito por Equipo de Imagina• Actualizado el 07/06/2024• Duración: 20 min

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.

Descubre la formación a tu medida

Rellena el formulario para obtener más información sobre los cursos.

Usaremos los datos personales recopilados a través de este formulario en línea para informarte de las últimas novedades sobre nuestros cursos. Para obtener más información, consulta nuestra política de privacidad.

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.

Descubre la formación a tu medida

Rellena el formulario para obtener más información sobre los cursos.

Usaremos los datos personales recopilados a través de este formulario en línea para informarte de las últimas novedades sobre nuestros cursos. Para obtener más información, consulta nuestra política de privacidad.