Ejecuta la aplicación "Aistarter" ya instalada, luego crea un nuevo proyecto y ponle el nombre que desees.
Todo dibujo de línea o circulo que se realice en el Screen debe estar contenido en un lienzo. Seleccione en Paleta / Dibujo y animación , arrastre "Lienzo" hasta el visor, en propiedades cambiar alto y ancho por "ajustar al contenedor"
Los botones para poder elejir colores, segmentos, circunferencias o borrar iran en la parte superior del lienzo, para esto en Paleta / Disposición encontraran una opción que dice "DisposiciónHorizontal" arrastrarla a la zona superior y agregarle 6 botones que encontraran en Paleta / Interfaz de Usuario , deberan editar CADA BOTÓN en sus propiedades, cambiar los colores y el texto, dejando el siguiente orden : lINEA - CIRCUNFERENCIA - ROSA - VERDE - AZUL - BORRAR.
Ahora, agregaremos un deslizador para poder elejir el grosor de nuestro lapiz, en Paleta / Disposición encontraran una opción que dice "DisposiciónHorizontal" arrastrarla a la zona inferior de nuestro lienzo (cambiarle el ancho por ajustar al contenedor) y agregarle un deslizador que encontraran en Paleta / Interfaz de Usuario
Así es como se vera nuestra aplicación desde el computador
Si se fijan hay un boton que no se alcanza a ver, pero no se preocupen, desde el celular se veran todos los botones
Con la zona de diseño lista, iremos a bloques, en donde empezaremos con poder dibujar el segmento, es necesario indicar el punto de inicio y el punto final, debemos inicializar tres variables: "inicio.x", "inicio.y" y "activado".
Las variables inicio.x e inicio.y almacenarán las coordenadas del punto de inicio, que es la posición del punto se obtiene cuando se toca por primera vez la pantalla del móvil. Estas serán variables globales de manera que sean reconocidas por todos los bloques y objetos. Serán inicializados en (0,0).
Ir al modo Bloques y seleccionar "Variables", apretar en "Inicializar global nombre como", cambiar el nombre por "Inicio.x", en la sección de matemáticas apretar el bloque "0" y encajarlo en el anterior, hacer lo mismo para el "inicio.y".
La variable activado cambia su estado a cierto después de hacer el primer toque en la pantalla y volverá a cambiar después de dibujar la línea. Es decir, nos indica si se está en modo de dibujar el segmento o no, o de otro modo, si se comenzó a dibujar el segmento.
Para crear el "activado" hacer lo mismo que lo anterior, pero, envez de "0" colocar "Falso"
Recuerden ir guardando el proyecto, y si quieren ver que todo esté en orden, deben apretar en la parte superior izquierda donde dice “Conectar” y un emulador si lo tienes en tú computador y sino en “al companion” si tienes la aplicación desde tu celular.
Crearemos las variables "fin.x" y "fin.y" para guardar las coordenadas del segundo toque o del fin del segmento.
Como debemos tocar la pantalla del celular para indicar el inicio y fin del segmento agregaremos el bloque "cuando lienzo1.Tocar" que permite capturar el evento de tocar el Screen.
Para dibujar una línea haremos lo siguiente:
SI la variable activo es falsa, entonces, estamos realizando el primer toque a la pantalla, por lo tanto, debemos almacenar las coordenadas en "inicio.x" e "inicio.y" y cambiamos el estado de la variable activado a "cierto"
Si no preguntamos por la variable activado nuevamente para saber si estamos en modo segmento, si es cierta entonces estamos en el segundo toque, por lo tanto debemos almacenar las coordenadas del segundo toque en las variables "fin.x"y "fin.y", para luego "llamar lienzo.DibujarLinea". Después de dibujar la línea cambiamos el estado de la variable activado.
Quedara de la siguiente forma
Para conocer qué tipo de figura geométrica se dibujará, necesitamos una variable que indique qué botón es el activo. Crear la variable figura e inicializarla en 1 para indicar que se dibujará una línea, en caso de circunferencia su valor deberá ser 2
Cada vez que se hace clic en un botón este cambia el valor por la figura correspondiente, entonces, para dibujar una circunferencia sus bloques seran
El algoritmo para dibujar una circunferencia es analogo al del segmento, solo cambia en "llamar lienzo1.DibujarCirculo" y el radio deberá calcularse mediante la distancia entre las coordenadas de punto de inicio y el punto final del radio, buscar la raíz cuadrada, potencia, diferencia y suma en el área de matemática.
Debera quedar de la siguiente manera
El resultado de este paso debera ser como se muestra a continuación
El resultado final de ambos algoritmos debe quedarles así
Para elejir que color utilizaremos en CADA UNO de los botones que destinamos al principio (botón rosa, verde y azul) en la sección bloques deben seleccionar "cuando boton3 clic .. ejecutar", en lienzo1 seleccionar "poner lienzo1.ColorDePintura .. como " y elejir un color del área de colores, encajar todos los bloques, debera quedar de esta forma
Para colorear necesitamos el bloque "cuando lienzo1.arrastrado .. ejecutar", luego "llamar lienzo1.DibujarLinea" y encajarlo en el bloque anterior, para crear el efecto de estar pintando en el lienzo debemos en el x1 colocar el bloque "tomarXPrevio" y en el x2 colocar el bloque "tomarXActual", lo mismo para el y1 e y2 según corresponda, quedando de la siguiente manera
Para cambiar el grosor del lapiz ocuparemos nuestro deslizador, le hacemos clic y seleccionamos "cuando deslizador1.PosiciónCambiada ... PosiciónDelPulgar.. ejecutar", en lienzo1 seleccionamos la opción "poner lienzo1. AnchoDeLínea .. como" y lo encajamos en el bloque anterior, por ultimo tomamos posición del pulgar y lo encajamos, quedando de la siguiente manera
Finalmente, borrar el lienzo, para esto apretar en "cuando boton6 clic.. ejecutar" y en las opciones del lienzo1 hay una que dice "llamar lienzo1. limpiar" encajarla con el anterior
Para terminar, recuerda guardar el proyecto y descargarlo en tu computador.
!No olvides probarlo! :D
No hay comentarios:
Publicar un comentario