Zoom 3, desplazando la ventana de scroll

En entradas anteriores he escrito sobre cómo crear en Interface Builder una ventana con barras de desplazamiento y también sobre cómo ampliar la vista. Ahora ya toca un ejemplo concreto. Una pequeña aplicación que hace un dibujo y que tiene la opción de hacer zoom sobre este dibujo.

La ventana del ejemplo

La ventana del ejemplo

Deslizador

La primera novedad sobre los programas anteriores es la aparición de un deslizador (NSSlider), este deslizador será el que permitirá decidir sobre el nivel de zoom que tendremos en la vista.

En Interface Builder definimos las propiedades del deslizador, en esta ocasión marcar los valores mínimo (1.0), máximo (8.0) y valor con el que se comienza, current, (1.0). También es conveniente dejar sin marcar la casilla “Continuous” que activa el control contínuo del deslizador. El problema del control contínuo es la gran carga de trabajo que puede suponer para el sistema, ya que se realiza la acción para cada pequeño cambio de la posición aunque no se suelte el ratón.

Propiedades del deslizador en Interface Builder

Propiedades del deslizador en Interface Builder

Para poder hacer zoom con el deslizador hay que preparar en la vista una acción (IBAction).

-(IBAction) escogerEscala:(id)sender{
    [self setFactorEscala:[sender floatValue]];
}

Y para que si cambiamos el nivel de zoom de otras formas (con el teclado, por ejemplo) una salida (IBOutlet) para dar al deslizador el nuevo valor.

// Nos aseguramos que el deslizador tenga el valor adecuado
// del factor de escala
[deslizador setFloatValue:factorEscala];

Scroll

El nucleo del programa esta en dos elementos. En una variable que llamaré factorEscala, que guarda el nivel actual de zoom. Y en la función setFactorEscala: que establece el nuevo nivel de zoom. Para el nuevo nivel de zoom la función hará tres cosas:

  1. Solo activa la función si ha cambiado el valor de escala y luego asegurarse que el nuevo factor de escala está entre 1 y 8.
  2. Ampliar el marco de la vista para hacer el zoom.
  3. Centrar la vista en el centro de la ventana actual.

Es posible (incluso recomendable) el zoom hacerlo en una función diferente, pero para un ejemplo tan sencillo no he querido complicarme la vida. La parte de centrar la vista es prescindible, y sospecho que no dentro de mucho esta opción se controlará a través de Interface Builder.

/**
* setFactorEscala: (float)nuevaEscala
*
* Modifica el tamaño de la vista para hacer zoom.
* Se encarga de mantener la escala entre 1 y 8, de centrar la vista.
*/
-(void) setFactorEscala:(float)nuevaEscala{
 if(nuevaEscala != factorEscala) {
 // Limitamos los posibles valores de escala a [1, 8]
 if (nuevaEscala > 8)
 nuevaEscala = 8;
 if (nuevaEscala < 1)
 nuevaEscala = 1;

 factorEscala = nuevaEscala;

 // Para hacer zoom, necesitamos mantener los límites y cambiar
 // el tamaño del marco (frame)
 NSSize frameSize, boundsSize;
 frameSize = boundsSize = [self bounds].size;

 // Buscamos las coordenadas del centro actual de la vista
 NSPoint nuevoOrigen;
 NSRect clip = [self visibleRect];
 nuevoOrigen.x = clip.origin.x+clip.size.width/2;
 nuevoOrigen.y = clip.origin.y+clip.size.height/2;

 //
 frameSize.height *= factorEscala;
 frameSize.width *= factorEscala;
 [self setFrameSize:frameSize];
 [self setBoundsSize:boundsSize];

 // Calculamos el nuevo origen a
 // partir del centro anterior de la vista.
 clip = [self visibleRect];
 nuevoOrigen.x -= clip.size.width/2;
 nuevoOrigen.y -= clip.size.height/2;

 // Desplazamos la vista al nuevo origen
 [self scrollPoint:nuevoOrigen];

 // Nos aseguramos que el deslizador tenga el valor adecuado
 // del factor de escala
 [deslizador setFloatValue:factorEscala];

 // Al Cambiar límites y la posición de Scroll
 // no hace falte pedir un redibujado
 //[self setNeedsDisplay:YES];
 }
}

Puedes ver el código fuente del ejemplo en: zoom.zip

 

Archivos alojados en Dropbox.com

 

Faltará por explicar unos “detallitos”, cómo gestionar el nivel de zoom con el teclado. Ya que es algo bastante diferente al apartado gráfico lo explicaré en una entrada propia.

Entradas Relacionadas

Etiquetas: , , ,

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: