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?
Odpowiedz
Wystarczy znaleźć małą bibliotekę, która robi dokładnie to: https://github.com/camoconnell/lazy-line-painter
Opiera się na lib Raphael (http://raphaeljs.com/), a dwa razem wzięte nie robią zbyt duża ładunek.
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
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
BTW, nie próbowałem go, ale myślę, że Chrome obsługuje teraz linie przerywane z context.setLineDash ([5]). – markE
Zgadza się - chciałbym jednak pozostać w strefie pełnej kompatybilności :) – Gnurou
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
Och, to bardzo pomocne. Sława. – Gnurou