Dibujando en una ventana con Cocoa (2a parte)

Sigamos dibujando, ahora un resumen de los elementos que podemos dibujar utilizando Cocoa. En el artículo anterior ya he explicado básicamente como se comienza: Dibujando en una ventana con Cocoa.

3. Elementos para dibujar

3.1. Las coordenadas en Cocoa

Aunque hay muchos detalles de los que hablar en Cocoa las coordenadas del dibujos siempre estan expresadas en puntos (en general un punto equivaldrá a un píxel). Y el origen de coordenadas estará en la esquina inferior izquierda creciendo el eje horizontal (OX) hacia la derecha y el eje vertical (OY) hacia arriba. Vamos unos ejes cartesianos de los de siempre. En programación esta es una excepción ya que muchas veces el origen está en la esquina superior izquierda y el eje de las Y aumenta hacia abajo de la ventana.

3.2. Puntos

Pues un punto es un punto, vamos: un objeto de una dimensión. Cada punto tendrá unas coordenadas (x, y) que lo sitúan dentro de la vista en la que estamos dibujando. Lo utilizaremos para situar el origen de otros objetos o como parte de otros objetos, ya que NO SE PUEDE dibujar un punto. Eso si se puede dibujar un cuadrado de un punto de ancho y alto que nos hará una función parecida.

    NSPoint origen = NSMakePoint(10,10);

3.3. Colores

Seleccionar el color de dibujo es una opción básica para cualquier operación. En Cocoa los colores están definidos por la clase NSColor. Para escoger el color hay muchas opciones, desde escoger un color predefinido a escoger un color a partir de sus componentes RGB y otras variedades.

 //Seleccionar el color rojo
    [[NSColor redColor] set];

3.4. Rectángulos

El elemento más básico para dibujar en Cocoa es el rectangulo (NSRect) Definido a partir de un punto de origen (x,y) y un tamaño (ancho, alto) utilizando la función NSMakeRect. En vez definido el rectángulo, se pueden dibujar los bordes con el método strokeRect: o bien rellenenarlo con el método fillRect: . Un ejemplo sería:

 // Rellenar rectángulos negros
    [[NSColor blackColor] set];
    NSRect rectangulo = NSMakeRect(150,200,40,80);
    [NSBezierPath fillRect:rectangulo];
 //Dibujar rectángulos Grises
    [[NSColor grayColor] set];
    rectangulo = NSMakeRect(80,180,35,60);
    [NSBezierPath strokeRect:rectangulo];....

3.5. El fondo

Lo más sencillo es seleccionar el color blanco y luego rellenar el rectángulo de la vista con el método fillRect: de la clase NSBezierPath y utilizando como argumento el rectángulode la vista (en el ejemplo: fondo)

- (void)drawRect:(NSRect)fondo{ //Dibujar el fondo de color blanco
    [[NSColor whiteColor] set];
    [NSBezierPath fillRect:fondo];    ....

Claro que rellenar el fondo debe de hacerse antes de hacer cualquier otro dibujo.

3.6. Rectas

Las lineas rectas son otro de los elementos básicos de dibujo. Hay dos formas de crearlas. La forma más sencilla pero limitada es hacer servir el método strokeLineFromPoint: toPoint: de la clase NSBezierPath. Sólo hace falta indicar el los puntos de origen y final para que dibuje la linea, por ejemplo:

 //Linea recta En color verde
	[[NSColor greenColor] set];
	NSPoint origen = NSMakePoint(10,10);
	NSPoint final = NSMakePoint(50,70);
	[NSBezierPath strokeLineFromPoint:origen toPoint:final];

	.....

Una opción algo más compleja pero más potente es crear lineas Bézier. Esto permite dibujar varias lineas seguidas y crear formas más complejas con facilidad:

 //Linea múltiple
	NSBezierPath *linea = [NSBezierPath bezierPath];
	NSpoint origen = NSMakePoint(120,170);
	NSpoint final = NSMakePoint(320,170);
	[linea moveToPoint:origen];
	[linea lineToPoint:final];
	final = NSMakePoint(300, 120);
	[linea lineToPoint:final];
	final = NSMakePoint(140, 120);
	[linea lineToPoint:final];
	[linea closePath ];
	[linea stroke];

En primer lugar creamos el objeto linea que apunta a la linea Bezier que queremos dibujar. Luego creamos el punto inicial (origen) y el punto final (final). Para comenzar el dibujo desplazamos el inicio de la linea al punto de origen con el mensaje moveToPoint: Luego creamos una linea Bezier muy especial, la recta, con el método lineToPoint: Después marcamos otro punto como final y repetimos la creación de otro tramo recto. Para acabar podríamos haber indicado otro punto final, pero es más sencillo enviar el mensaje closePath y no hace falta calcular nada. Para acabar enviamos el mensaje stroke al objeto de linea Bezier para que se dibuje.

3.7. Círculos y óvalos

Otros elementos básicos de dibujos son los círculo, que en este caso Cocoa los trata como casos particulares de los óvalos.

En primer lugar hay que definir un rectángulo (o un cuadrado) y luego Cocoa dibuja el óvalo (círculo) dentro de ese cuadrado. Un ejemplo:

 // Círculo  [[NSColor blueColor] set]; NSBezierPath *circo = [NSBezierPath bezierPath]; NSRect rectanguloN = NSMakeRect(210,190,20,20); [circo appendBezierPathWithOvalInRect:rectanguloN]; [circo stroke];

	.....

3.8. Arcos

Para dibujar un arco de circunferencia se puede hacer indicando los puntos iniciales y finales y el radio de la circunferencia. También puede indicarse el centro de la circunferencia, el radio y los ángulos iniciales y finales:

 // Dibujar Arcos
	[[NSColor redColor] set];
	NSBezierPath *arco1 = [NSBezierPath bezierPath];
	NSPoint origen = NSMakePoint(220,160);
	[arco1 appendBezierPathWithArcWithCenter:origen
                            radius:100  startAngle:180 endAngle:360];
	[arco1 stroke];

	....

3.9. Curvas Bezier

En casi todos los apartador anteriores ha salido la clase NSBezierPath. Esta clase es como ha añadido Apple en Cocoa la lineas o curvas Bézier. Una recta puede tratarse como una curva Bézier y un rectángulo como un conjunto de estas lineas.

Pero también se pueden utilizar para crear curvas con formas muy complejas. Un ejemplo sencillo

 // Dibujar curvas Bézier
	[[NSColor brownColor] set];
	NSBezierPath *curva = [NSBezierPath bezierPath];
	NSPoint puntoInicio = NSMakePoint(120, 300);
	NSPoint puntoFinal = NSMakePoint(320, 300);
	NSPoint puntoControl1 = NSMakePoint(200, 350);
	NSPoint puntoControl2 = NSMakePoint(240, 250);
	[curva moveToPoint:puntoInicio];
	[curva curveToPoint:puntoFinal controlPoint1:puntoControl1
              controlPoint2:puntoControl2];
	[curva stroke];

Para dibujar esta linea necesitamos cuatro puntos, origen, final y dos puntos de control, según el siguiente esquema:

Curva de Bézier

4. Más información en …

El resultado de todas las instrucciones es:

Dibus

Y el código fuente completo es Dibus00.zip

Archivos alojados en Dropbox.com

 

 

 

 

 

 

 

Etiquetas: , ,

2 comentarios to “Dibujando en una ventana con Cocoa (2a parte)”

  1. Miguel Valle Says:

    link de código fuente roto :( D:

  2. luisrey Says:

    Ya he vuelto a publicar el código, esta vez en dropbox. Espero que dure.

    Luis

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: