Aktualny stan bibliotek kanw Javascript? [Zamknięte]


90

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.


2
absolutnie. Wydaje mi się, że opcje wyglądają następująco: 2d-context -> KineticJS, fabric.js, paper.js lub easel.js. 3d-context (webgl) -> Three.js
Eric Rowell,

1
Możesz sprawdzić link kangax do porównania bibliotek kanw. Ponowne zamieszczenie tutaj docs.google.com/spreadsheet/…
ericbowden

4
Dziwię się, że to pytanie nie zostało jeszcze zamknięte, ponieważ prawie wszystko tutaj jest zazwyczaj zamknięte. Chcę odpowiedzieć, ale jestem zbyt przestraszony (czytaj „przerażony”), ponieważ może to zostać uznane za nie na temat. Może gdybyś przeredagował pytanie jako „jakie są podobieństwa / kompromisy”, mógłbym dodać moje dwa centy (przeczytaj „odpowiedź”)
puk

4
Czuję się tak samo jak @puk. Ponadto uważam, że rozdźwięk semantyczny między tym, co zasadniczo jest „otwarte”, a tym, co jest oznaczone jako „nie konstruktywne”, jest zabawny. To z grubsza przekłada się na wypowiadanie pytań, na które nie można uzyskać pojedynczej nieredukowalnej odpowiedzi, a które nie są warte rozważenia w najbardziej popularnym i wszechstronnym repozytorium wiedzy programistycznej. Rozumiem, że nie pasują do dobrych „pytań i odpowiedzi”, ale dlaczego po prostu nie oznaczyć ich jako „wysoce subiektywnych”, ograniczyć liczbę powtórzeń i pozostawić otwartych… coś.
Mark Fox

1
Rozważam tylko, że ja też jestem naprawdę zirytowany ciągłym zamykaniem pomocnych pytań tylko dlatego, że są subiektywne. Więc co!? To cholernie przydatne rzeczy.
Iain Duncan

Odpowiedzi:


80

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.


Twoje porównanie daje dużo informacji, ale można je publicznie edytować, które powinny być ograniczone, ponieważ niektórzy inni użytkownicy będą je nieprawidłowo edytować. Potrzebuję pomocy, czy kineticjowie nie będą wspierać nodjów? i można dać jeden przykład jak malować okna programu (rysunek obiekt circle żywo z tkaniny)
Thirumalai Murugan

nie można go publicznie edytować
kangax

1
Całe szczęście, że znalazłem ten post! Kiedyś pracowałem z Kinetic, ale jeszcze nie jest dojrzały. Potem wypróbowałem Easel, ale jest za ciężki. Wreszcie przeniósł się do Fabric i jest świetnie!
MeLight,

@kangax Niestety dla zrozumienia miss, możesz dać mi jeden przykład jak okna programu Paint (rysowanie obiektów krąg żywo z tkaniny)
Thirumalai Murugan

@Thirumalaimurugan gotowe: jsfiddle.net/fabricjs/nXmTC/1
kangax

66

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.


7
Tylko spojrzałem na dema i wydajność wygląda naprawdę niesamowicie! Cieszę się również, że masz testy jednostkowe. Widzę, że pozwalasz na tworzenie wielu warstw. To miłe. W przypadku tkanin optymalizujemy w ten sam sposób, ale mamy tylko 2 warstwy - jedną do wyboru, drugą do rysowania - i wewnętrznie (użytkownicy nie mogą tworzyć więcej). Jakoś przegapiłem Kinetic podczas tworzenia tabeli porównawczej bibliotek. Powinniśmy to naprawić :)
kangax

6
aktualizacja: KineticJS jest teraz na github: github.com/ericdrowell/KineticJS
Eric Rowell

7
Jak wypada KineticJS w ​​porównaniu z EaselJS? Kiedy należy czego użyć?
geeky_monster

1
chciałbym zwrócić uwagę, że KineticJS obsługuje wektory SVG również poprzez kształt Kinetic.Path
Eric Rowell

2
@EricRowell Mate Uwielbiam KineticJS, jego szybkość, małżeństwo z GSAP, ale co mnie kręci w głowie, czy istnieje sposób na swobodne przekształcanie obiektów KineticJS, tak jak w FabricJS? Oto odsyłacz do tego, co próbuję powiedzieć: fabricjs.com/customization Nie chcę używać FabricJs jako bardzo powolnego, a jego niska wydajność jest widoczna w różnych testach jednostkowych. Naprawdę nie mogę się doczekać znalezienia sposobu na swobodną transformację obiektu w KineticJS, ponieważ znacznie ułatwiłoby to życie. Dzięki, Praney
praneybehl

62

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.


1
Dzięki za tę odpowiedź, zaoszczędziłem dużo czasu. Idę z Kinetic i mam nadzieję, że odkryjesz to, co już powiedziałeś.
Bashevis

Wykonałem nienaukowy test użytkowników dostarczonych demonstracji typu „przeciągnij i upuść” dla powyższych bibliotek na iPad3 i Samsung Galaxy Tab2. KineticJS okazał się wyraźnym zwycięzcą również tutaj, będąc bardziej responsywnym i dokładniejszym w pozycjonowaniu dotykowym.
Per Quested Aronsson

1
Oceniam jedno i drugie i na razie szczerze fabricjs wydaje się być bardziej kompletne i dobrze udokumentowane.
albanx

9
Jeremy, chciałbym dowiedzieć się więcej o niespójnościach API w Fabric. Staram się, aby było jak najbardziej intuicyjne, więc jeśli coś jest nadal dziwne, zdecydowanie chciałbym się tym zająć. Czy możesz złożyć zgłoszenie lub wspomnieć o tym tutaj? Dokumentacja poprawiała się od stycznia, chociaż nadal nie jest tak dobra, jak bym chciała. Mocna opinia o interaktywności - myślę, że można to powiedzieć, chociaż można zrobić wiele poprawek. Co dokładnie chciałeś innego? Wreszcie zdarzenia wskaźnikowe - nie wiem, co masz na myśli. Ścieżka z pewnością ma prawdziwy kształt: fabricjs.com/quadratic-curve
kangax

23

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/


3
Od lipca 2014 wydaje się, że jest to najlepsza biblioteka płótna. Na Githubie pojawiło się 4 tys. Osób i jest używane przez duże firmy i agencje. pixijs.com/projects jak Google.
Vennsoh
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.