(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Tutorial pintado en iOS

iOS
Intermedio
20 minutos

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.

En esta primera parte simplemente pondremos nuestro lienzo y, sobre él, podremos pintar definiendo de inicio un color y un grosor para nuestro “lápiz”.

Para comenzar crearemos un nuevo proyecto de tipo Simple View Application en XCode. En las opciones le daremos el nombre que consideremos, le diremos que no queremos StoryBoards y que tampoco queremos ARC. Además, concretaremos que es sólo para iPad.El código que utilizaremos es usable en iPhone tal cual, pero lo ponemos en iPad simplemente por comodidad y por espacio a la hora de pintar.

Lo primero que debemos hacer es importar los frameworks que utilizaremos en nuestro proyecto.

Para ello, como se ve en la imagen, iremos a la pestaña Build Phases dentro de la cabecera de nuestro proyecto. Ahí abriremos “Link binary With Libraries” y añadiremos con el botón “+” OpenGLES.framework y QuartzCore.framework.

Teniendo esto sólo nos queda insertar el import dentro del fichero .h de nuestro UIViewController.

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

Para crear nuestro lienzo de dibujo simplemente pondremos un UIViewController encima de nuestra Vista principal.

Para ello, vamos ViewController.xib y arrastramos un UIImageView desde el listado de herramientas hasta nuestra vista. Seguidamente, activaremos el assistant editor (el botón que parece un frac arriba a la derecha en XCode) y, con él, arrastraremos desde nuestro xib con ctrl+click en la nueva UIImageView que añadimos hasta el .h

Esto nos creará el IBOutlet que enlaza.

Con esto, si ahora ejecutáramos veríamos simplemente una pantalla en blanco en la que no podríamos hacer nada.

Para hacer un pintado sencillo crearemos primero variables para guardar los datos de color, grosor del pincel y la posición de los toques.

Entonces, en el ViewController.h lo dejaremos de la siguiente manera:

</p>
<p>#import <UIKit/UIKit.h><br />
#import <QuartzCore/QuartzCore.h><br />
@interface ViewController : UIViewController{<br />
float rojo;<br />
float verde;<br />
float azul;<br />
float pincel;</p>
<p>// Trazos<br />
CGPoint currentPoint;<br />
CGPoint previousPoint1;<br />
}</p>
<p>@property (retain, nonatomic) IBOutlet UIImageView *image;</p>
<p>@end</p>
<p>

Ahora, para gestionar el pintado inicializaremos los valores de color y pincel, dentro de viewDidLoad añadiremos el siguiente código.

</p>
<p>pincel = 10.0;<br />
rojo = 0.2;<br />
verde = 0.3;<br />
azul = 0.7;</p>
<p>image.multipleTouchEnabled = NO;</p>
<p>

Y, finalmente, para que todo esto cuadre sobreescribiremos los métodos touchesBegan y touchesMoved con el siguiente código:

</p>
<p>-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event<br />
{<br />
UITouch *touch = [touches anyObject];</p>
<p>previousPoint1 = [touch previousLocationInView:image];<br />
currentPoint = [touch locationInView:image];</p>
<p>}<br />
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event<br />
{<br />
UITouch *touch = [touches anyObject];</p>
<p>previousPoint1 = [touch previousLocationInView:image];<br />
currentPoint = [touch locationInView:image];</p>
<p>UIGraphicsBeginImageContext(image.frame.size);<br />
CGContextRef context = UIGraphicsGetCurrentContext();<br />
[image.image drawInRect:CGRectMake(0, 0, image.frame.size.width, image.frame.size.height)];</p>
<p>CGContextMoveToPoint(context, previousPoint1.x, previousPoint1.y);</p>
<p>CGContextAddLineToPoint(context, currentPoint.x, currentPoint.y);</p>
<p>CGContextSetLineCap(context, kCGLineCapRound);<br />
CGContextSetLineWidth(context, pincel);<br />
CGContextSetRGBStrokeColor(context, rojo, verde, azul, 1.0);<br />
CGContextStrokePath(context);</p>
<p>image.image = UIGraphicsGetImageFromCurrentImageContext();<br />
UIGraphicsEndImageContext();<br />
}</p>
<p>

En el código lo que hemos hecho básicamente es:

  • En touchesBegan hemos inicializado el punto actual y el anterior con los puntos que tiene la vista como tocados.
  • Después, en touchesMoved (es decir, cada punto que se mueve nuestro dedo):
    • En las líneas 14 a la 18 actualizamos el punto actual y el anterior
    • Inicializamos el contexto de pintado en las lineas 21 y 22
    • En la 23 pintamos la imagen actual de nuestro UIImageView en el contexto
    • Linea 25: nos posicionamos mediante CGContextMoveToPoint en la posición final del paso anterior (es decir, previousPoint)
    • A partir de aquí, añadimos una linea con CGContextAddLineToPoint hasta el punto final (currentPoint) en la línea 27
    • Después ponemos los valores de la línea (final de línea redondeado, ancho del pincel, color) entre las líneas 29 y 32
    • Finalmente, en la línea 34 creamos la imagen a partir del contexto, se la ponemos al ImageView que tenemos en nuestra vista y cerramos el contexto en la 35

Finalmente sólo nos queda ejecutar la aplicación y ver el resultado.

En siguientes tutoriales iremos viendo como suavizar las líneas, como borrar, añadir botones para cambio de color, etc… Mientras puedes conocer las características de la aplicación de i Cuadernos by Rubio.

En Imagina Formación te ofrecemos formación en estas nuevas tecnologías. Si quieres estar a la última en cualquiera de las diferentes plataformas, y a fin de cuentas, tu objetivo es aprender no dudes en solicitar información sin compromiso. Contamos con las herramientas y los medios necesarios para impartir cualquier tipo de formación. Te lo ponemos fácil. Formación online, presencial o de empresa, elige la modalidad que mejor se adapte a tus necesidades.

¿Sabes cómo puedes realizar una formación sin coste para tu empresa?

¿Buscas cursos bonificados? ¿Conoces qué es la Fundación Tripartita? Si eres trabajador tus cursos están subvencionados. Imagina Formación es una entidad organizadora de la Fundación Estatal de modo que puedes gestionar la formación bonificada de los cursos con nosotros. Nos encargamos de todos los trámites para conseguir la bonificación sin ningún coste adicional. Cumplimos con todos los requisitos para que nuestros cursos sean 100% bonificables.

Échale un vistazo a nuestro catálogo de Cursos Destacados y amplia tus conocimientos en las últimas tecnologías de referencia del sector. Si tienes cualquier duda… ¡Contacta con nosotros!

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies