Suavizar dibujado en ActionScript
Publicado por Iván Gajate el 23 de Febrero de 2009 en AS3, Flash, Tutoriales
Un truco que siempre utilizo cuando hago una aplicación de dibujo en ActionScript, es calcular la distancia entre el punto de dibujo anterior y el nuevo. Si esa distancia no es mayor de un mínimo, no dibujo la nueva línea.
Esto, a parte de mejorar mucho el rendimiento, sirve para suavizar el trazo, pues se disimulan mucho los temblores de dibujar con un ratón.
A esa distancia la llamo umbral de dibujo, y con que sea de 3 píxeles, es suficiente para reducir el número de líneas a un tercio. Un ejemplo
Tan solo hay que guardar la posición del ratón al pulsarlo, y al soltarlo, comprobar la distancia entre ambos puntos.
var umbral:uint = 5; var ptoAnterior:Point; function pulsado(e:MouseEvent=null){ ptoAnterior = new Point(mouseX, mouseY); stage.addEventListener(MouseEvent.MOUSE_MOVE, dibujar); } function dibujar(e:MouseEvent){ var dist:Number = Point.distance(ptoAnterior, new Point(mouseX, mouseY)); if(dist>umbral){ // dibujo una nueva linea... } }
Esto no solo sirve para dibujar líneas, sino también para calcular si se ha soltado el ratón en el mismo punto, o para dejar de hacer cálculos si una distancia es muy pequeña, o para cualquier aplicación donde queramos mejorar el rendimiento y evitar una precisión innecesaria.