Disegno metà di un tracciato Bezier in Raphael

Question

Diciamo che ho un percorso Bézier cubica come segue (formattato per l'uso con la funzione di percorso Raffaello):

M55 246S55 247 55 248

Solo un esempio. Questo è stato preso dalla mia applicazione di disegno, dove uso il cursore per tracciare una linea quando l'utente tiene premuto il pulsante del mouse, tipo una matita o un pennarello. Sto usando l'evento Mousemove di jquery per disegnare la linea tra due punti ogni volta che l'utente muove il mouse. C'è un altro (il punto di riferimento) che viene preso prima che la linea sia disegnata, in modo che la curva di Bezier possa essere creata.

Ecco la mia domanda: è possibile fare in modo che Raffaello tragga solo metà di un determinato percorso? Sono a conoscenza della funzione getSubpath(), ma se la mia comprensione delle curve di Bezier è corretta, sarebbe piuttosto difficile calcolare il secondo argomento. Il problema con la funzione animate è che crea doppie linee (cioè crea la linea curva che voglio e la linea squadrata che lo circonda che non dovrebbe essere mostrata, probabilmente perché il mouse viene spostato più velocemente di quanto l'animazione possa gestire).

Naturalmente, se il mio approccio è in qualche modo imperfetto (o la mia comprensione delle possibili soluzioni), mi piacerebbe sentirlo. Qualsiasi aiuto sarebbe apprezzato.

Answer 1

E 'un po' disordinato, ma forse questo sarà rispondere:

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); 

Onestamente, questo questo è abbastanza inefficiente. Ma non riesco a pensare a un modo migliore per farlo. Non puoi afferrare la tangente e dividere per metà, poiché una curva più bezier sarà più lunga della lunghezza di una linea tangente (in linea d'aria). Ciò significa che è necessario elaborare la linea tramite rapheal e quindi ottenere un subPath di metà della lunghezza.

Answer 2

Il punto centrale può essere calcolato, non a conoscenza di alcuna funzionalità in Raphael che taglierà a metà il bezier.

Dagli sguardi di questi comandi, è markup SVG standard (vedere le specifiche SVG per capire meglio: http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands)

M => MoveTo posizione assoluta 55,24 S => curva liscia all'assoluto 55,247 55,248

La curva liscia può essere riscritta come CurveTo standard o C se lo si desidera, S è solo la scorciatoia per esso e la curva/C consente di calcolare facilmente il punto centrale.

Answer 3

Dividere una curva di Bézier a metà è solo un po 'di matematica, niente di troppo difficile. Potresti essere aiutato dal path extensions for raphaël, e dovrebbe essere piuttosto semplice aggiungere un metodo lì per eseguire la suddivisione.

La parte "solo un po 'di matematica" potrebbe ad esempio utilizzare De Castelau's algorithm per dividere la curva in un dato punto.