SMOOTHDRAW

aplicación de dibujo que le permite crear líneas suaves y dinámicas con un ambiente muy receptivo. El grosor de las líneas de cambio y de color dependiendo de qué tan rápido se mueve el ratón, dando lugar a sutiles variaciones que le dan al dibujo un aspecto realista. El efecto general es algo así como dibujar con marcadores gruesos o pintura. Puede exportar la imagen de la película flash o bien el formato jpg o png cuando haya terminado. Haga clic en la imagen de abajo para abrir la aplicación en una ventana nueva.
Diseñar un algoritmo que interpreta los movimientos del ratón para crear curvas suavemente dibujada es un poco difícil. Movimientos reales de ratón puede ser mucho más irregular y desigual que el usuario puede tener la intención, por lo que el algoritmo debe suavizar estos movimientos. Pero entonces, por definición, el algoritmo no está siguiendo las peticiones del usuario exactamente, por lo que se debe tener cuidado para equilibrar la suavidad con precisión.



La solución simple que usamos aquí es dibujar la curva sólo un cierto porcentaje (30%) hacia la posición del ratón cada vez que se mueve el ratón. Esta técnica es similar al método de arrastre sin problemas presentados en nuestro tutorial Cómo añadir aceleración a su Arrastrar sin Tweens en AS3 Flash. En este ejemplo, sin embargo, el movimiento continuo se logró utilizando una función de detector ENTER_FRAME, mientras que aquí sólo actualizar el dibujo cuando el ratón cambia de posición.

Las líneas trazadas por la aplicación cambiar su grosor y color dependiendo de qué tan rápido se mueve el ratón. Mayores resultados de velocidad en las líneas más gruesas y más brillante. (Es posible que desee experimentar con el código para que mejores resultados de velocidad en líneas más finas, lo que da una sensación muy diferente). La medición de la velocidad del ratón es fácil: simplemente determinar a qué distancia de las posiciones del ratón actuales y anteriores son.

Las curvas que se derivan son, en realidad compuesta por pequeños segmentos de cuatro lados que conectan entre sí para formar la curva. La imagen a continuación ayuda a explicar este método, y el código pueden ser examinados para los detalles precisos.



Así es cómo funciona: cada vez que se mueve el ratón, una posición del ratón suavizado se calcula, y dos puntas para un nuevo segmento se crean al alejarse de la posición del ratón alisada en una dirección perpendicular. El segmento de cuatro lados se dibuja con estos nuevos puntos, además de los puntos anteriores dos.

Para dar a las líneas de curvatura un poco más, los bordes exteriores de estos segmentos se dibujan utilizando el método curveTo en Flash. Esto crea una curva cuya forma está determinada por el uso de un punto de control. Los puntos de control son elegidos para ser en ángulo recto con el borde interior. Su distancia lejos del borde se fija a un tercio de la distancia entre la posición aplanada ratón último y actual, una relación que se ha decidido a través de un poco de experimentación.

Hay un problema con este método: ya que estamos suavizando la posición del ratón, la curva no se extiende todo el camino hasta la posición actual del ratón, que se siente extraño ya que está dibujando la curva. Para remediar esto, una propina extra se extrae de la posición del ratón suavizada a la posición del ratón real. Esta punta se dibuja con un segmento más cuadrilátero un círculo, como se muestra a continuación. Este truco no está dibujado en el lienzo hasta que el botón del ratón es liberado.

Con la suavización de la posición del ratón, la curva dibujada a veces puede sentir un poco demasiado suave, especialmente cuando se realizan cambios bruscos en la dirección de la curva. Para aumentar el realismo y la capacidad de respuesta del dibujo, el código analiza el movimiento del ratón para ver si un brusco cambio ha ocurrido, y si es así, entonces el punto más agudo se dibuja mediante el uso de la posición anterior del ratón real en lugar de la posición suavizada. La determinación de si el ratón hace un cambio brusco se realiza midiendo el ángulo entre el movimiento anterior y el movimiento presente. Si este cambio de ángulo es de más de 90 grados, el método de punta afilada se utiliza en lugar del método suave.

Colores

Una pequeña selección de los colores se da por debajo de la tela, el color se puede seleccionar haciendo clic en el correspondiente "muestra". Cada color es de hecho un gradiente, que representa la gama de colores a utilizar. Los movimientos lentos de ratón se traducirá en colores hacia la parte inferior de la muestra, resultados más rápidos en movimiento en colores más arriba. Usted puede modificar el código para crear muestras de color adicionales: los colores están contenidos en el vector swatchColors cerca de la parte superior del código.



Exportación de imágenes

Exportación de imágenes está a cargo de las clases JPGEncoder y PNGEncoder disponibles como parte del proyecto, auspiciado as3corelib aquí. Hemos creado una clase BitmapSaver que proporciona un cuadro de diálogo con botones para hacer clic en el ahorro de las imágenes, junto con el código necesario para salvar la imagen. El BitmapSaver amplía la clase Sprite, y se puede reutilizar fácilmente en cualquier aplicación donde se desea la salvación de un mapa de bits. Por ejemplo, puede utilizar el siguiente código para crear un cuadro de diálogo para guardar un mapa de bits llamado myBitmap:



Es posible que desee agregar el BitmapSaver al escenario sólo cuando se hace clic en un botón para que aparezca este cuadro de diálogo.

Descargar gratis este programa: http://www.general-files.com/download/gs18e7c21h5di0/SmoothDraw%204.0.1.rar.html