¿Cómo puedo convertir curveTo() en una lista de puntos?

Question

tomar las siguientes AS3 que dibujar una línea curva usando curveTo():

var line:Shape = new Shape(); 

line.x = line.y = 20; 
line.graphics.lineStyle(2, 0xFF0000); 
line.graphics.curveTo(200, 200, 200, 0); 

addChild(line); 

El visual resultante es:

Ahora quiero algo que sea capaz de seguir este camino; ¿Cómo puedo convertir este visual en una lista de coordenadas? Lucho con cualquier matemática avanzada, pero asumo que hay una fórmula obvia (para algunos) que curveTo() usa para crear lo anterior que puedo replicar y enmendar para crear mi lista deseada.

El resultado puede terminar luciendo así (suponiendo un desplazamiento de aproximadamente 5px entre puntos).

Vector.<Point> = [ 
    new Point(20, 20), 
    new Point(23, 23), 
    new Point(27, 28), 
    new Point(33, 32), 
    new Point(40, 37) 
    /* ...etc... */ 
]; 

El resultado será usado para cosas como la creación de una lluvia de proyectiles que siguen las siguientes vías de acceso, por ejemplo:

Answer 1

De la lectura de la documentación de ActionScript, entiendo que la curveTo script de método en acción genera una curva de Bezier cuadrática.

La curva consta de tres "puntos de control" que ha especificado en su código:

control point 1 (p1) = (20,20) 
control point 2 (p2) = (200,200) 
control point 3 (p3) = (200,0) 

Para interpolar un valor a lo largo de la curva en valor u que va de 0 a 1 (siendo 0 el inicio punto y 1 es el punto final) puede usar lo que se llama polinomios de Bernstein. Para una curva cuadrática (su caso) los polinomios son:

B1 = (1 - u) * (1 - u) 
B2 = 2 * u * (1 - u) 
B3 = u * u 

Basta con calcular estos números para el valor del parámetro u y se suman los puntos de control multiplicada por sus correspondientes polinomios de Bernstein.

point on curve at parameter *u* = p1 * B1 + p2 * b2 + p3 * B3 

Así, por ejemplo, si desea obtener 5 puntos a lo largo de la curva, se calcula los puntos a lo largo de la curva en valores de parámetros 0, 0,25, 0,5, 0,75, y 1,0

Answer 2

curveTo() se usa dibujar una curva bezier cuadrática, donde se calcula una curva bezier entre dos puntos finales y en relación con dos puntos de anclaje, y una curva bezier cuadrática es una donde ambos puntos de anclaje tienen las mismas coordenadas.

Las curvas de Bezier se calculan mediante una serie de ecuaciones que le permiten encontrar las coordenadas xey para un punto que se alcanza en un momento dado a lo largo de la ruta, por lo que esto ya se ajusta bastante bien a sus necesidades. Puede encontrar información general sobre las curvas bezier en this page.

Todo lo que necesita hacer para obtener los puntos de coordenadas es traducir estas ecuaciones a ActionScript. Y afortunadamente, Paul Tondeur tiene una buena publicación en el blog que muestra cómo hacerlo. Su solución se usa para dibujar curvas de bezier cúbicas, pero puede cambiar fácilmente el código para devolver las coordenadas de lo que está tratando de hacer.

Answer 3

Una curva de Bezier es una función paramétrica.Una curva de Bezier cuadrática (es decir, tres puntos de control) se puede expresar como: F (t) = A (1 - t)^2 + B (1 - t) t + Ct^2 donde A, B y C son puntos y t va de cero a uno.

esto le dará dos ecuaciones:

x = a(1 - t)^2 + b(1 - t)t + ct^2 

y = d(1 - t)^2 + e(1 - t)t + ft^2 

Si se agrega, por ejemplo, la ecuación de la recta (y = kx + m) de eso, usted va a terminar con tres ecuaciones y tres incógnitas (x, y y t).

de: How to find the mathematical function defining a bezier curve

usando esta ecuación, se puede crear una matriz de coordenadas X e Y