Przenoszenie obiektu na ścieżce krzywej Béziera

Question

Chcę przenieść obraz na ścieżce krzywej Béziera od góry do dołu, ale nie mogę uzyskać informacji, jak obliczyć punkty x/y i nachylenie z tej ścieżki. Ścieżka wygląda jak na poniższym rysunku:

mam zacząć punkty, punkty końcowe i dwa punkty kontrolne.

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

To sześcienny krzywa Béziera dla którego formuła jest po prostu [x,y]=(1–t)^3*P0+3(1–t)^2*t*P1+3(1–t)t^2*P2+t^3*P3. Dzięki temu można rozwiązać dla każdego punktu, oceniając równanie. W Javie to można zrobić to tak:

/* 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; 
} 

więc jeśli chciał przenieść ikonki wzdłuż ścieżki, wtedy wystarczy ustawić wartość t od wartości 0 - 1, w zależności od tego, jak daleko w dół Ścieżka, którą chcesz być. Przykład:

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

Jeśli masz tylko 2 punktów kontrolnych, krzywa Beziera jest linia liniowy.

Jeśli masz 3, masz kwadratową krzywą. 4 punkty kontrolne definiują krzywą sześcienną.

Krzywe Beziera są funkcjami zależnymi od "czasu". Zmienia się od 0.0 - 1.0. Jeśli wprowadzisz 0 do równania, otrzymasz wartość na początku krzywej. Jeśli wprowadzisz 1,0, wartość na końcu.

Krzywe Beziera interpolują pierwsze i ostatnie punkty kontrolne, więc będą to Twoje początkowe i końcowe punkty. Przyjrzyj się dokładnie, jakiego pakietu lub biblioteki używasz do generowania krzywej.

Aby zorientować obraz za pomocą wektora stycznego krzywej, należy rozróżnić równanie krzywej (można wyszukać równanie krzywej sześciennej beziera na wiki). To da ci styczny wektor do orientacji twojego obrazu.

Answer 3

Aby znaleźć punkt na krzywej Beziera, można użyć algorytmu De Casteljau.

Zobacz na przykład http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/de-casteljau.html lub użyj Google, aby znaleźć niektóre implementacje.

Answer 4

Android oferuje interfejs API, który pozwala osiągnąć zamierzony cel. Użyj klasy o nazwie android.graphics.PathMeasure. Istnieją dwie metody przydatne: getLength(), aby pobrać całkowitą długość w pikselach ścieżki i getPosTan(), aby pobrać pozycję X, Y punktu na krzywej w określonej odległości (jak również styczna w tej lokalizacji.)

Na przykład, jeśli getLength() zwraca 200 i chcesz poznać pozycję X, Y punktu na środku krzywej, wywołaj getPosTan() z odległością = 100.

Więcej informacji: http://developer.android.com/reference/android/graphics/PathMeasure.html

Answer 5

Należy zauważyć, że zmiana parametru w postaci parametrycznej kubicznego beziera nie daje liniowych wyników. Innymi słowy, ustawienie t = 0,5 nie daje punktu, który znajduje się w połowie krzywej. W zależności od krzywizny (która jest określona przez punkty kontrolne), wzdłuż drogi będą nieliniowości.

Answer 6

Dla każdego, kto potrzebuje obliczyć wartości statyczne punktów krzywej Beziera Bezier curve calculator jest dobrym źródłem. Zwłaszcza jeśli używasz czwartego kwadranta (tj. Pomiędzy linią X a linią -Y).Następnie możesz całkowicie zmapować go do układu współrzędnych systemu Android, wykonując mod o wartości ujemnej.