Sposta un oggetto su un tracciato curva di Bézier

Question

Voglio spostare la mia immagine su un tracciato di curva di Bézier dall'alto verso il basso ma non riesco a ottenere come posso calcolare i punti x/y e la pendenza da questo percorso. Il percorso si presenta come la seguente immagine:

devo iniziare a punti, i punti finali e due punti di controllo.

Path path = new Path(); 
Point s = new Point(150, 5); 
Point cp1 = new Point(140, 125); 
Point cp2 = new Point(145, 150); 
Point e = new Point(200, 250); 
path.moveTo(s.x, s.y); 
path.cubicTo(cp1.x, cp1.y, cp2.x, cp2.y, e.x, e.y); 

Answer 1

Si tratta di una curva di Bézier cubica per cui la formula è semplicemente [x,y]=(1–t)^3*P0+3(1–t)^2*t*P1+3(1–t)t^2*P2+t^3*P3. Con questo puoi risolvere per ogni punto valutando l'equazione. In Java questo si potrebbe fare in questo modo:

/* t is time(value of 0.0f-1.0f; 0 is the start 1 is the end) */ 
Point CalculateBezierPoint(float t, Point s, Point c1, Point c2, Point e) 
{ 
    float u = 1 – t; 
    float tt = t*t; 
    float uu = u*u; 
    float uuu = uu * u; 
    float ttt = tt * t; 

    Point p = new Point(s.x * uuu, s.y * uuu); 
    p.x += 3 * uu * t * c1.x; 
    p.y += 3 * uu * t * c1.y; 
    p.x += 3 * u * tt * c2.x; 
    p.y += 3 * u * tt * c2.y; 
    p.x += ttt * e.x; 
    p.y += ttt * e.y; 

    return p; 
} 

Quindi, se si voleva spostare uno sprite lungo il percorso, allora si avrebbe semplicemente impostare il valore di t da un valore di 0-1 a seconda di quanto in basso la percorso che vuoi essere. Esempio:

int percentMovedPerFrame = 1;// Will complete path in 100 frames 
int currentPercent = 0; 
update() { 
    if (currentPercent < 100) { 
     this.pos = CalculateBezierPoint(currentPercent/100.0f, this.path.s, this.path.c1, this.path.c2, this.path.e); 
     currentPercent += percentMovedPerFrame 
    } 
} 

Answer 2

Se si dispone solo di 2 punti di controllo, una curva di Bézier è una linea lineare.

Se si dispone di 3, si ha una curva quadratica. 4 punti di controllo definiscono una curva cubica.

Le curve di Bezier dipendono dal "tempo". Va da 0.0 a 1.0. Se si inserisce 0 nell'equazione, si ottiene il valore all'inizio della curva. Se inserisci 1.0, il valore alla fine.

Le curve di Bezier interpolano il primo e l'ultimo punto di controllo, quindi quelli sarebbero i punti di partenza e di arrivo. Guarda attentamente quale pacchetto o libreria stai usando per generare la curva.

Per orientare l'immagine con il vettore tangente della curva, è necessario differenziare l'equazione della curva (è possibile cercare l'equazione della curva di Bezier cubica su wiki). Questo ti darà il vettore tangente per orientare la tua immagine.

Answer 3

Per trovare un punto su una curva di Bézier, è possibile utilizzare l'algoritmo di De Casteljau.

Vedere ad esempio http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/de-casteljau.html o utilizzare Google per trovare alcune implementazioni.

Answer 4

Android ti offre un'API per realizzare ciò che desideri. Utilizzare la classe chiamata android.graphics.PathMeasure. Ci sono due metodi che troverai utili: getLength(), per recuperare la lunghezza totale in pixel del percorso, e getPosTan(), per recuperare la posizione X, Y di un punto sulla curva ad una distanza specificata (e la tangente in questa posizione.)

Ad esempio, se getLength() restituisce 200 e si desidera conoscere la posizione X, Y del punto nel mezzo della curva, chiamare getPosTan() con distanza = 100.

Maggiori informazioni: http://developer.android.com/reference/android/graphics/PathMeasure.html

Answer 5

Si noti che la modifica del parametro nella forma parametrica di un bezier cubico non produce risultati lineari. In altre parole, l'impostazione di t = 0,5 non ti dà un punto che è a metà della curva. A seconda della curvatura (che è definita dai punti di controllo) ci saranno non linearità lungo il percorso.

Answer 6

Per chi ha bisogno di calcolare punti di valore statici della curva di Bezier Bezier curve calculator è una buona fonte. Soprattutto se usi il quarto quadrante (cioè tra la linea X e la linea -Y).Quindi puoi mapparlo completamente al sistema di coordinate Android facendo mod su valore negativo.