Dibujo medio de un trazado Bézier en Rafael

Question

Digamos que tengo un trazado Bézier cúbica de la siguiente manera (con formato para su uso con la función de trayectoria de Rafael):

M55 246S55 247 55 248

sólo un ejemplo. Esto fue tomado de mi aplicación de dibujo, donde uso el cursor para dibujar una línea cuando el usuario mantiene presionado el botón del mouse, como un lápiz o marcador. Estoy usando el evento mousemove de jquery para dibujar la línea entre dos puntos cada vez que el usuario mueve el mouse. Hay otro (el punto de referencia) que se toma antes de que se dibuje la línea, de modo que se puede crear la curva de Bezier.

Aquí está mi pregunta: ¿es posible hacer que Raphael solo dibuje la mitad de una ruta determinada? Soy consciente de la función getSubpath(), pero si mi comprensión de las curvas de Bezier es correcta, sería bastante difícil calcular el segundo argumento. El problema con la función animada es que crea líneas dobles (es decir, crea la línea curva que yo quiero, y la línea cuadrada a su alrededor que no se debe mostrar, posiblemente porque el mouse se mueve más rápido de lo que la animación puede manejar)

Por supuesto, si mi enfoque en sí mismo es defectuoso de alguna manera (o mi comprensión de las posibles soluciones), me gustaría escucharlo. Cualquier ayuda sería apreciada.

Answer 1

Es un poco desordenado, pero tal vez esto va a contestar:

line[line.length] = paper.path(drawPath); //drawPath being the fill line length 

//get a subpath, being half the length of your bezier curve 
subPath = line[line.length - 1].getSubpath(0, line[line.length - 1].getTotalLength()/2); 

//remove the full-length bezier curve 
line[line.length - 1].remove(); 

//Draw your new line 
line[line.length - 1] = paper.path(subpath); 

Sinceramente, esto es bastante ineficiente. Pero, no puedo pensar en una mejor manera de hacerlo. No se puede simplemente agarrar la tangente y dividirla por la mitad, ya que una curva bezier será más larga que la longitud de una línea tangente (en línea recta). Esto significa que debe procesar la línea a través de rapheal y luego obtener una subPath de la mitad de la longitud.

Answer 2

Se puede calcular el punto medio, sin tener en cuenta ninguna funcionalidad en Raphael que corte el bezier a la mitad para usted.

Desde el aspecto de estos comandos, es marcado el estándar SVG (ver la especificación SVG para entenderlo mejor: http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands)

M => MoveTo la posición absoluta 55,24 S => Suavizar curva a la absoluta 55,247 55,248

La curva suave se puede reescribir como CurveA estándar o C si lo desea, S es solo la abreviación y la curva A/C puede calcular fácilmente el punto central.

Answer 3

La división de una curva bezier a la mitad es solo un poco de matemática, nada demasiado difícil. Es posible que te ayude el path extensions for raphaël, y debería ser bastante simple agregar un método para dividirlo.

La parte "solo un poco de matemática" podría, por ejemplo, usar De Castelau's algorithm para dividir la curva en cualquier punto dado.