+2500
Empresas han confiado en nosotros
51,5k
Personas que hemos formado
13
años de liderazgo

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.

Contáctanos
Contáctanos

Solicita la información que necesites

Facilítanos tus datos y uno de nuestros asesores se pondrá en contacto contigo, para informarte sobre el curso que mejor se adapta a tus necesidades. Todas nuestras formaciones se pueden bonificar hasta el 100%, a través de FUNDAE, sujeto a realizar la formación a través de la empresa y a tener crédito disponible. Tenemos diferentes modalidades de formación; Online o Aula Virtual Personalizada, a medida