Aktualny stan bibliotek kanw Javascript? [Zamknięte]

Prowadziłem badania nad bibliotekami kanw HTML i natknąłem się na to pytanie. Jaki jest obecny stan wiedzy w bibliotekach JavaScript i strukturach HTML kanwy? zadano to pytanie w 2010 roku. Najczęstszą odpowiedzią był Fabric.js. Po dokładniejszych badaniach natknąłem się na stronę http://www.html5canvastutorials.com/, która zawiera samouczki na temat KineticJs, która szczyci się posiadaniem wielu obrazów zwiększających szybkość. Trochę więcej badań później wykazało, że biblioteki Canvas wydają się być wszechobecne, jeśli chodzi o szybkość i funkcje. Jaki jest obecny stan bibliotek i struktur JavaScript Canvas? Czy ktoś wyszedł na szczyt?

EDYCJA: Ponieważ biblioteki ciągle się zmieniają, a wiele osób ostatnio przychodziło tutaj po wiadomości i informacje o nowych bibliotekach, zmieniłem pytanie, aby było bardziej ponadczasowe.

Zastrzeżenie: jestem autorem Fabric.js .

Powiedziałbym, że w tej chwili do najczęściej używanych należą Easel.js, Fabric.js i Paper.js. Oceniam po liczbie obserwatorów Github dla każdego repozytorium, wolumenie dyskusji w ich Grupach dyskusyjnych Google i jak często słyszę o nich jako o bibliotekach kanwy na Twitterze.

Są to również te z mniej lub bardziej przyzwoitą dokumentacją, przykładami / demonstracjami, grupami dyskusyjnymi i testami jednostkowymi (stan testów w większości innych bibliotek Canvas jest dość smutny).

Utrzymuję również tę tabelę porównawczą różnych bibliotek kanw, w której można zobaczyć, jak ostatnio biblioteka została zaktualizowana, jej rozmiar, obsługę IE <9 lub node.js i nie tylko.

EDYCJA: KineticJS nie jest już aktywnie utrzymywany.

Zastrzeżenie: stworzyłem KineticJS

KineticJS radzi sobie całkiem nieźle. Kod źródłowy można znaleźć na Githubie , gdzie obecnie występuje w nim 2180 osób.

Może obsługiwać tysiące współbieżnych kształtów:

10000 testów warunków skrajnych metodą przeciągnij i upuść: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10000 kształtów z podpowiedziami: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Ma bardzo dobrą obsługę wydarzeń, w tym wydarzeń mobilnych, i ma całkiem solidny zestaw setek testów jednostkowych, więc baza kodu jest całkiem solidna.

kangax: PS, świetna praca z fabric.js! Poza KineticJS (oczywiście), moje dwie inne ulubione biblioteki to tkaniny i papier.

Dla niedawnych czytelników, od stycznia 2013 r., Oceniłem:

• Kinetyczny
• Tkanina
• Papier
• Sztaluga

„Oceniając”, zrobiłem więcej niż tylko przeczytanie dokumentów; Stworzyłem prototypową aplikację.

Zacząłem od Fabrica, ponieważ wydawało się, że ma największą społeczność i pomyślałem, że to będzie moje rozwiązanie. Ale zrezygnowałem z Fabric z następujących powodów:

• dziwne i nieudokumentowane niespójności w API, które niepotrzebnie pochłonęły mój czas.
• niespójna obsługa zdarzeń wskaźnika. W szczególności Fabric nie traktuje „ścieżki” jako obiektu o rzeczywistym kształcie, który można wybrać i obserwować. Nie spełniło to moich potrzeb, ponieważ ścieżki interaktywne są głównym wymaganiem mojej aplikacji.
• za kulisami dodawanie tłumaczeń do kanwy w celu pozycjonowania obiektów. Dla mnie Fabric stara się być pod tym względem zbyt sprytny, nie wyjaśniając programistom, co robi.
• zbyt mocna opinia na temat tego, jak działa interaktywność przenoszenia, zmiany rozmiaru i obracania. Pod wieloma względami świetnie jest mieć tę funkcjonalność wbudowaną we frameworku, ale w moim przypadku nie zgadzałem się ze sposobem jej implementacji, co oznaczało w istocie konieczność samodzielnego jej ponownego zaimplementowania.
• rzadka dokumentacja - wiele przypadków, w których dokumentacja metody ma postać: "setX (Y) - ustaw X na Y" :-)

Spojrzałem na Paper i nie zaszedłem za daleko. Wydawało mi się to zbyt tępe, a także wpada między zbytnio stołki IMO - to zbyt duża biblioteka wizualizacji, aby być prostym modelem obiektowym dla Canvas, ale nie wystarczająca biblioteka wizualizacji, aby konkurować z D3. Ponadto dokumentacja ponownie nie była szczególnie dostępna.

Myślę, że Easel prawdopodobnie ma dużo sensu, jeśli masz tło Flash / ActionScript, ale ja nie. Poza tym wydawało się, że jest zbyt skoncentrowany na grze jak na moje wymagania. Gwóźdź do trumny znów był dokumentacją - za mało i przedstawioną w niestandardowym formacie.

Więc zdecydowałem się na Kinetic, ponieważ:

• naprawdę bogate i przejrzyste samouczki i przykłady
• Funkcje API działają tak, jak się nazywają, iw dużej mierze można je odgadnąć - szybszą produktywność, płytszą krzywą uczenia się
• jest dość jasny, co robi, a czego nie - nie jest tak bogaty jak niektóre inne, ale to jest korzyść; robi mniej rzeczy, ale robi to lepiej
• Ścieżki to kształty obywatelskie pierwszej klasy, jak każdy inny Kształt, który był niezbędny dla moich wymagań.

Kinetic nie jest w żaden sposób doskonały i kilka razy musiałem zagłębiać się w kod źródłowy, aby dowiedzieć się, co tak naprawdę dzieje się pod okładkami. Poza tym brakuje mi analizy SVG i wyjścia Fabric.

Gorąco polecam pixijs. Jest to wysoce wydajna biblioteka płótna.

Pixi.js to renderujący 2D webGL z płynnym powrotem kanwy, który umożliwia pracę we wszystkich nowoczesnych przeglądarkach zarówno na komputery stacjonarne, jak i urządzenia mobilne.

http://www.goodboydigital.com/pixi-js-is-out/