Gráficos con GraphicsPath

Desde Xojo 2019r2 cuentas con una nueva clase que te permite crear gráficos como la representación matemática de una serie de formas y líneas: desde líneas simples, curvas de Bèzier, cuadráticas… ¡Las ventajas son muchas! Por ejemplo, el hecho de que al tratarse de una clase puedes crear diferentes dibujos que no requieren de un contexto gráfico, así como la precisión en la que puedes crear las representaciones encadenando los trazados… ¡simplemente uniendo los puntos!

Y es que los métodos disponibles en la clase te permitirán añadir de un modo realmente simple y menor complejidad en comparación con la clase Object2D, tanto rectángulos (con su variante de esquinas redondeadas), arcos, curvas y curvas cuadráticas (de Bèzier) que nos proporcionan un punto de control.

Puedes descargar el proyecto de ejemplo desde aquí.

Lo interesante en este caso es que cada llamada a uno de estos métodos tomará como punto de partida la coordenada (punto) en el que finalizó el “trazo” de la forma anterior; si bien siempre se puede utilizar el método MoveToPoint para hacer precisamente eso: mover el “lápiz” a una coordenada dada sin que se dibuje ningún trazo. Este sería, por tanto, el nuevo punto tomado como origen a la hora de realizar el trazado de la siguiente línea, dibujado de curva, etc.

En cuanto a las propiedades disponibles, cuentas con las siguientes:

• CurrentPoint. Puedes consultarlo para saber en qué coordenada te encuentras en un momento determinado y tomar una decisión en consecuencia.
• IsEmpty. Nos permite conocer si el trazado (gráfico) está vacío; es decir, no contiene ningún elemento.
• IsRectangle. Nos permite saber si el trazado es un rectángulo.

¡En marcha!

Empezaremos viendo lo sencillo que resulta aplicar estos principios en la creación de una gráfica que utiliza una curva de Bêzier, sobre la cual podremos variar el punto de control. Cuando finalicemos, nuestro proyecto tendrá el siguiente aspecto:

1. Diseñar la interfaz de usuario

Nuestra interfaz de usuario está compuesta por los siguientes elementos:

• 2 Etiquetas (Label)
• 2 Sliders. Utiliza el Panel Inspector en cada uno de ellos para activar la Propiedad “Allow Live Scrolling” bajo la sección Behavior.
• 1 Control Canvas.

Utiliza los ajustes de bloqueo de control en cada uno de los Slider y en el Canvas, tal y como se muestra en la imagen. Esto permitirá que sus tamaños se adapten a medida que se modifique el tamaño de la ventana.

2. Creando nuestro Lienzo de Gráfica (subclase Canvas)

Haremos que el Canvas sea una clase especializada, y eso significa crear nuestra propia subclase.

Añade una nueva clase al proyecto (Insert > Class) y utiliza el Panel Inspector para ajustar las siguientes propiedades:

• Name: CuadraticCanvas
• Super: Canvas

A continuación añade dos Propiedades Calculadas (Computed Property). Para ello, asegúrate de que está seleccionado el item de nuestra clase en el Navegador de Proyecto y accede al menú contextual para seleccionar la opción Add to “CuadraticCanvas” > Computed Property.

Utiliza los siguientes datos en el Panel Inspector resultante:

• Name: PC1X
• Type: Double

A continuación, selecciona el método “Set” de la propiedad calculada y añade la siguiente línea de código después de la existente:

invalidate

Con ello forzamos a que el control se vuelva a dibujar cada vez que modifiquemos el valor del punto X en la coordenada de control de la curva Bèzier.

Repite la operación para añadir una segunda propiedad calculada con los siguientes valores:

• Name: PC1Y
• Type: Double.

Recuerda añadir también la línea de código “Invalidate” en el método “Set” de esta propiedad.

Ahora añadiremos el Manejador de Evento Paint a nuestra clase. Para ello, y con la item aun seleccionado en el Navegador de Proyecto, accede al menú contextual para seleccionar la opción Add to “CuadraticCanvas” > Event Handler…

En el panel resultante, selecciona Paint y confirma la selección. Esta acción añadirá el nuevo evento a la clase presentando el Editor de Código donde has de introducir el siguiente código:

g.AntiAlias = True

g.DrawingColor = &cffffff
g.FillRectangle(0,0,g.Width,g.Height)
g.DrawingColor = &c000000
g.DrawLine(g.Width/2,0,g.Width/2,g.Height)
g.DrawLine(0,g.Height/2,g.Width,g.Height/2)

g.DrawingColor = &ccc1233

Var gp As New GraphicsPath
gp.MoveToPoint(0,g.Height/2)
gp.AddQuadraticCurveToPoint(Me.pc1x,Me.pc1y,g.Width,g.Height/2)

g.DrawPath gp

Como puedes ver, aquí es donde creamos una instancia de la clase GraphicsPath (representada por la variable “gp”), y sobre la cual se añade una curva cuadrática utilizando como punto de control las coordenadas correspondientes a los valores de las propiedades “PC1X” y “PC1Y”.

Para que nuestra forma se dibuje en el contexto gráfico (representado por la variable “g”) utilizamos el método DrawPath, pasando la variable de nuestro objeto GraphicsPath como argumento.

3. Uniendo los puntos

Selecciona el elemento “Canvas1” en el Navegador de Proyecto y utiliza el Panel Inspector para modificar el campo “Super” a “CuadraticCanvas”.

A continuación, selecciona el elemento “Slider1” y añade el Manejador de Evento “ValueChanged”. Introduce la siguiente línea de código en el Editor de Código resultante:

canvas1.pc1x = me.Value

Repite la operación con “Slider2”, salvo que en este caso la línea de código será:

canvas1.pc1y = me.Value

Selecciona ahora el item “Window1” en el Navegador de Proyecto y añade dos eventos: Open y Resizing. Incorpora en ambos la siguiente línea de código:

SetSliders

A continuación añadiremos un nuevo método en la ventana Window1. Para ello, selecciónala en el Navegador de Proyecto y accede al menú contextual para elegir la opción Add to “Window1” > Method. Utiliza la siguiente signatura en el Panel Inspector:

• Method Name: SetSliders

E introduce el siguiente código en el Editor de Código asociado:

slider1.MaximumValue = canvas1.Width
slider2.MaximumValue = canvas1.Height
canvas1.PC1x = Slider1.Value
canvas1.PC1y = Slider2.Value

Este será el método encargado de actualizar tanto el máximo valor de los sliders (con el ancho de la ventana), y también de actualizar el dibujado de la gráfica pasando los nuevos valores ajustados.

¡Mueve la curva!

Ya tenemos todo lo necesario. Es el momento de ejecutar la aplicación y utilizar los sliders para mover el punto de control. A medida que lo hagas verás como va variando el dibujo de la curva sobre el canvas.

¡Ya tienes un punto de partida! Prueba a utilizar el resto de los métodos de la clase GraphicsPath o bien añadir más curvas de Bèzier para dibujar las formas que precises.