Path

La clase Path permite definir un trazado a partir de segmentos de línea y curvas. Una vez definido puede ser dibujado con canvas.drawPath(Path, Paint). Un Path también puede ser utilizado para dibujar un texto sobre el trazado marcado.

Ejercicio paso a paso: Uso de la clase Path

1.     Reemplaza dentro de OnDraw del ejercicio anterior el código siguiente:

Path trazo = new Path();
trazo.addCircle(150, 150, 100, Direction.CCW);
canvas.drawColor(Color.WHITE);
Paint pincel = new Paint();
pincel.setColor(Color.BLUE);
pincel.setStrokeWidth(8);
pincel.setStyle(Style.STROKE);
canvas.drawPath(trazo, pincel);
pincel.setStrokeWidth(1);
pincel.setStyle(Style.FILL);
pincel.setTextSize(20);
pincel.setTypeface(Typeface.SANS_SERIF);
canvas.drawTextOnPath("Desarrollo de aplicaciones para
                     móviles con Android", trazo, 10, 40, pincel);

2.     El resultado obtenido ha de ser:

3.     Modifica en la segunda línea el parámetro Direction.CCW (contrario a las agujas del reloj) porDirection.CW (a favor de las agujas del reloj). Observa el resultado.

4.   Modifica los parámetros de canvas.drawTextOnPath() hasta que comprendas su significado.

5.     ¿Podrías dibujar el texto a favor de las agujas del reloj, pero por fuera del círculo?

 

Ejercicio paso a paso: Un ejemplo de Path más complejo

1.     Reemplaza las dos primeras líneas del ejemplo anterior por:

Path  trazo = new Path();
trazo.moveTo(50, 100);
trazo.cubicTo(60,70, 150,90, 200,110);
trazo.lineTo(300,200); 

2.     El resultado obtenido ha de ser similar a:

El trazo comienza desplazándose a las coordenadas (50,100). Luego introduce una curva cúbica o Bézier hasta la coordenada (200,110). Una curva Bézier introduce dos puntos de control, el primero (60,70) permite controlar como arranca la dirección del comienzo de la curva y el segundo (150,90) la dirección del final de la curva. Funciona de la siguiente manera, si trazas una recta desde el comienzo de la curva (50,100) hasta el primer punto de control (60,70) la curva se trazará tangencialmente a esta recta. Finalmente, se añade una línea desde las coordenadas (200,110) hasta (300,200).

3.     ¿Por qué aparece una separación entre la “p” y la “l”? ¿Qué dos parámetros del siguiente gráfico tendríamos que modificar para que esta separación no estuviera? (Solución: (150,90) => (150,65))

 

Preguntas de repaso y reflexión: Las clases para gráficos en Android 

{jcomments on}