2013-03-02 10 views
5

Załóżmy, że mam zakrzywioną ścieżkę utworzoną przy użyciu serii wywołań bezierCurveTo(). Chciałbym, aby pojawiał się progresywnie w animacji, zwiększając jej procent, który jest rysowany klatka po klatce. Problem polega na tym, że nie mogę znaleźć standardowego sposobu narysowania tylko części ścieżki płótna - czy ktoś by wiedział o dobrej drodze (lub nawet podstępnej), aby to osiągnąć?Jak narysować ścieżkę częściowo w kanwie HTML5?

+1

Ta odpowiedź na poprzednie pytanie może ci się przydać. http://stackoverflow.com/questions/878862/drawing-part-of-a-bezier-curve-by-reusing-a-basic-bezier-curve-function – jing3142

+0

Och, to bardzo pomocne. Sława. – Gnurou

Odpowiedz

2

Pewnie ... a Simon Porritt wykonał dla nas całą trudną matematykę!

jsBezier jest małą biblioteką z funkcją: pointAlongCurveFrom (krzywa, lokalizacja, odległość), która umożliwia stopniowe rysowanie każdego punktu wzdłuż krzywej Beziera.

jsBezier jest dostępny na GitHub: https://github.com/sporritt/jsBezier

+0

Dzięki - jednak spróbowałem tej metody (rysując wzdłuż krzywej) z innymi środowiskami, a wynik jest niestety dość wolny z powodu dużego przekroczenia. Można to wykorzystać do czasu standaryzacji używania linii poleceń (używanie linii przerywanych jest prostym sposobem uzyskania tego efektu). Wciąż otwarte na inne odpowiedzi. – Gnurou

+0

BTW, nie próbowałem go, ale myślę, że Chrome obsługuje teraz linie przerywane z context.setLineDash ([5]). – markE

+0

Zgadza się - chciałbym jednak pozostać w strefie pełnej kompatybilności :) – Gnurou

Powiązane problemy