Jak renderować płynną ścieżkę, biorąc pod uwagę zestaw punktów danych?

Question

Zastanawiam się nad renderowaniem ścieżek w ciągu ostatnich kilku dni bez żadnego realnego rozwiązania.

Przez renderowanie ścieżki rozumiem dany zestaw punktów danych X, Y (w różnej odległości), aby narysować przerywaną linię (lub w moim przypadku obróconego kwadratu) o stałej długości w regularnych odstępach między punktami stworzyć gładką ścieżkę.

Jeśli posiadasz sterowanie lotem dla iPhone'a, próbuję stworzyć podobny efekt do renderowania ścieżki w tej grze.

Oto mój problem. Jeśli szerokość grafiki + odstęp nie jest dokładnie określona w odległości między dwoma punktami zbioru danych, wówczas pozostawiam zakładkę lub zakładkę. Moim jedynym rozwiązaniem jest albo:

1) Za punkt końcowy następnego punktu nastawy danych przyjmij punkt zachodzenia/ujęcia, a następnie narysuj stamtąd do następnego punktu.

2) Zawsze należy rysować pod końcowym punktem końcowym i rozpocząć nowy od następnego punktu danych.

Żadne z tych rozwiązań nie jest idealne i oba mają problemy.

Czy ktoś ma lepsze rozwiązanie?

Każda pomoc będzie mile widziana.

Poniższy ekran przedstawia to, co staram się tworzyć: http://www.firemint.com/flightcontrol/screenshots-peaceful.html

grubą linią przerywaną.

Aktualizacja:

Cześć Próbowałem renderowania poprzez krzywe, ja obliczony sześcienną krzywą (przez 4 punktów kontrolnych). Jednak problem polega na interpolacji. Biorąc pod uwagę 0 i 1, mogę przejść przez dowolne 2 punkty. Jednak chcę przejść całą ścieżkę (wiele punktów kontrolnych). Problem polega na tym, że niektóre punkty kontrolne będą znajdować się w różnej odległości od siebie, a zatem przechodzenie przez stały przyrost kroku (np. 0.2) da nieregularne wyniki. Zdaję sobie sprawę, że aby poprawnie przejść całą ścieżkę, musiałbym obliczyć długość całej krzywej ... pytanie brzmi: jak to zrobić? ... czy jest inny sposób?

Cheers Bogate

Answer 1

Czy całkowicie ograniczony do quadów o stałym rozmiarze? Idealnym rozwiązaniem jest obcięcie ostatniego quada do właściwego rozmiaru.

Jeśli jesteś ograniczony, możesz zrobić kilka rzeczy. Jeśli rysujesz przerywane linie, możesz zmieniać odległość kresek, aby upewnić się, że nigdy nie skończysz z częściowymi quadami na punktach końcowych. Może to być wizualnie rozpraszające, ponieważ odległość dostosowuje się w zależności od długości segmentu.

edycja:

Ah, zdjęcie pomaga. Zakładam, że na iPhonie dostajesz serię punktów, z których linie rysujące między nimi tworzą akceptowalną krzywą. W takim przypadku użycie prążków splajnów/krzywych jest prawdopodobnie przesadą. Prawdopodobnie podchodziłbym do rysowania linii, jak pokazano po prostu przez rysowanie quadów w każdym punkcie danych, który jest daną odległością od ostatniego punktu danych.

Algorytm byłoby coś jak:

1. Draw quad na pierwszym punkcie danych (obrócone odpowiednio)
2. Traverse listy punktów dopóki jesteś co najmniej X odległości od ostatniego punktu
3. Lerp między bieżącym punktem a ostatnio odwiedzonym punktem, aby znaleźć dokładne centrum, aby umieścić następny quad.
4. Draw quad (obrócone odpowiednio)
5. przejdź do kroku 2
6. Jeśli masz częściową punkt za ostatni quad wyciągnąć go jako normalny (to daje lepszy wizualny niż obcinania go).

Dla zabawy, aby lerp między dwoma punktami przez pewną odległość D, która jest mniejsza niż odległość pomiędzy dwoma punktami (to chyba bardziej proste w przypadku 2D ale chciałabym pracować ogólnie):

vector v = point2 - point1; 
normalize(v); 
v *= D; 
finalPoint = point1 + v; 

Answer 2

Możesz chcieć rzucić okiem na Bezier curves lub hermite curves, które nie są trudne do obliczenia, a otrzymujesz ładne, miękkie krzywe.

Answer 3

Powinieneś prawdopodobnie sprawdzić algorytmy Bézier curves i Splines.

Answer 4

Istnieje funkcja CoreGraphics o nazwie "CGPathAddQuadCurveToPoint", która służy do rysowania gładkich ścieżek. An example on how to use it is on GitHub.