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
- 1. Jak narysować prostokąt na kanwie WPF
- 2. Jak narysować kursywę na kanwie Androida?
- 3. Jak usprawiedliwić wyrównywanie tekstu w kanwie HTML5?
- 4. Jak zrobić klikalne punkty w kanwie HTML5?
- 5. Jak przyciąć część tekstu w kanwie HTML5?
- 6. Android - Wypełnij ścieżkę kolorem częściowo
- 7. Jak narysować bitmapę szybko w metodzie onDraw() w kanwie android
- 8. Jak narysować gładką/zaokrągloną ścieżkę?
- 9. Jak narysować ścieżkę z bitmapą?
- 10. Jak narysować tę ścieżkę w WPF?
- 11. Dlaczego nie mogę narysować dwóch linii o różnych kolorach w kanwie HTML5?
- 12. Jak obcinać krawędzie klipów() w kanwie html5 w przeglądarce Chrome?
- 13. Jak narysować pączek z płótnem HTML5
- 14. Jak napisać tekst na górze obrazu w kanwie HTML5?
- 15. Jak narysować ścieżkę o zmiennej szerokości skoku
- 16. HTML5 Canvas - jak narysować linię na tle obrazu?
- 17. Jak wykreślić linię gradientu w kanwie HTML?
- 18. Jak narysować gwiazdę, używając canvas HTML5?
- 19. Czy unikniesz rysowania półpiksela w kanwie HTML5, by poprawić szybkość?
- 20. Jak zmienić grubość linii w kanwie HTML?
- 21. Co setDither, setFilterBitmap i setAntiAlias w kanwie?
- 22. Jak narysować ścieżkę na mapie za pomocą pliku kml?
- 23. Jak narysować świat Box2D używając Canvas HTML5 zamiast Debug Draw?
- 24. jak narysować siatkę używając html5 i (płótno lub svg)
- 25. Jak narysować okrąg z wyśrodkowanymi gradientami z płótnem HTML5?
- 26. HTML5 jak narysować przezroczysty obraz piksela na płótnie
- 27. Biblioteka JS open source HTML5 dla przepływów
- 28. Programowanie Androida: jak narysować tekst wielowierszowy w prostokącie?
- 29. Jak narysować coś takiego w Core Graphics
- 30. Jak narysować ścieżkę płynnie od punktu początkowego do punktu końcowego w D3.js
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