Jaki jest obecny stan wiedzy w bibliotekach JavaScript i strukturach HTML kanwy? [Zamknięte]


107

Obecnie badam opcje pracy z kanwami w nowej aplikacji HTML 5 i zastanawiam się, jaki jest obecny stan wiedzy w bibliotekach JavaScript i strukturach HTML kanwy?

W szczególności, czy istnieją frameworki, które obsługują rzeczy potrzebne do tworzenia gier - złożone animacje, zarządzanie wykresami scen, obsługę zdarzeń i interakcje użytkowników?

Również chętny do rozważenia zarówno produktów komercyjnych, jak i otwartych.


Jeśli korzystasz z wykresów scen i obsługi zdarzeń, czy format SVG nie jest lepiej dostosowany do Twoich potrzeb?
Joeri Sebrechts

Cóż, po części dlatego pytam. Płótno zdecydowanie ma rozpęd, więc staram się ustalić, co jest wykonalne, a co nie. SVG nie skaluje się szczególnie dobrze, jeśli chodzi o złożone animacje.
Toby Hede

Czy szukasz grafiki 3D, 2D czy też jednej?
LarsH

Kolejne fajne demo tutaj: kevs3d.co.uk/dev/asteroids . Nie jestem pewien, czy utworzona przez nich biblioteka jest dostępna dla wszystkich. Ale ładny przykład płótna.
Castrohenge

jsfiddle.net/user/zlatnaspirala/fiddles wypróbuj ten framework visualJS.
Nikola Lukic

Odpowiedzi:


96

Zrzut ekranu Fabric.js.

Pracowałem nad fabric.js - biblioteką płótna, która pomaga właśnie w tym - manipulowaniu obiektami na płótnie, obsługując zdarzenia i interakcje użytkownika. Nie jest jeszcze wydany, ale spójrz na prostą wersję demonstracyjną .

Możesz go również zobaczyć w akcji w tym edytorze projektów , dla którego został pierwotnie stworzony.

Edycja: Projekt jest teraz dostępny na github (open-source na licencji MIT)

Aby rozpocząć, sprawdź:

Jak wypada Fabric w porównaniu z innymi bibliotekami kanw Javascript? Oto tabela porównawcza .


Co to robi w IE? ExplorerCanvas?
Sasha Chedygov

14
To fenomenalne demo, niezwykle imponujący projekt
niezamontowany

3
@musicfreak Tak, ExplorerCanvas. Przy okazji, przechodzi wszystkie ~ 900 testów w IE9 (czwarta wersja zapoznawcza), używając natywnej obsługi kanwy.
kangax

4
Czy jest gdzieś strona projektu dla fabric.js? Jestem bardzo zainteresowany dowiedzeniem się więcej na ten temat.
Arne Roomann-Kurrik

Whoa, właśnie to, czego potrzebuję ... Właściwie byłem sfrustrowany tym, jak trudno było zarządzać funkcjami, które ta biblioteka tak płynnie obsługuje!
Shouvik

17

Jestem zaskoczony, że nikt nie wspomniał o WebGL i zbudowanych na nim frameworkach. Uważam to za wysoko na liście ze względu na najnowocześniejszą grafikę 3D z akceleracją GPU i złożoną animację na płótnie HTML / javascript.

WebGL to międzyplatformowy, wolny od opłat standard sieciowy dla niskopoziomowego interfejsu API grafiki 3D opartego na OpenGL ES 2.0, udostępniany za pośrednictwem elementu HTML5 Canvas jako interfejsy Document Object Model. ...

WebGL przenosi 3D do sieci bez wtyczek, zaimplementowane bezpośrednio w przeglądarce. Główni dostawcy przeglądarek Apple (Safari), Google (Chrome), Mozilla (Firefox) i Opera (Opera) są członkami grupy roboczej WebGL.

WebGL jest bardzo solidny w obsłudze grafiki akcelerowanej przez GPU. Sprawdź te demonstracje shaderów GLSL . :-) I zobacz ChemDoodle jako przykład interakcji użytkownika.

Pracowałem nad aplikacją wykorzystującą framework O3D firmy Google , która zarządza wykresem sceny i używa WebGL do renderowania (używał własnej wtyczki). O3D jest w toku, a jego dokumentacja nie jest w pełni aktualna, ale jest w trakcie aktywnego rozwoju i istnieje kilka dobrych wersji demonstracyjnych . Basen 3D może znajdować się najbardziej na twojej alei. Programiści Google bardzo reagują na pytania w grupie dyskusyjnej.

Istnieje wiele innych frameworków opartych na WebGL; zobacz tutaj . Wśród tych, które wspominają o tworzeniu gier i grafach scen, są Copperlicht, SceneJS, X3DOM.

WebGL działa w ostatnich wersjach rozwojowych kilku przeglądarek , ale nie IE. Używałem Firefoksa („Pole minowe”) i Chromium z dobrymi wynikami. Będziesz potrzebować jednego z nich, aby uruchomić powyższe wersje demonstracyjne.

Jednak jeśli Twoim wymaganiem jest to, że nie może mieć żadnych zależności poza kanwą / js HTML 5, WebGL może nie być właściwym wyborem. Wygląda na to, że IE wkrótce go obsłuży.

Aktualizacja: po postawieniu dużego oporu MS zdecydowało się na obsługę WebGL w IE 11 .


Three.js jest uruchamiany w sieci webgl
JqueryToAddNumbers

@nube: słuszna uwaga. Three.js można renderować w formacie WebGL, SVG lub zwykłym (2D) płótnie.
LarsH

15

three.js , autorstwa mr. doob , to fantastyczny silnik 3D dla javascript, który zawiera scenegraph (zarówno wersje programowe, jak i przyspieszone sprzętowo WebGL), cieniowanie, cząsteczki, animację skórki (tak mi się wydaje) i efekty świetlne. Sprawdź to, jest super utalentowanym facetem.

Powinienem dodać, że będziesz potrzebować najnowszej przeglądarki Google Chrome lub jej odpowiednika, aby wyświetlić większość wersji demonstracyjnych, jedną z moich ulubionych jest: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html


1
To demo jest właściwie jeszcze lepsze: carvisualizer.plus360degrees.com/threejs
Pierre Henry

13

KineticJS to wschodząca biblioteka, która szczyci się tworzeniem i animowaniem poszczególnych „warstw” na płótnie w celu uzyskania wysokiej wydajności.

http://www.kineticjs.com/


github.com/ericdrowell/KineticJS/#mothballed mówi: „ Nie będę już zajmował się tym repozytorium ani oficjalną stroną internetową KineticJS, ponieważ przeniosłem się do innych przedsięwzięć i projektów ”, a GitHub zgłasza 147 otwartych problemów
xmojmr


6

Spójrz na framework processingjs . Również nadchodząca wersja Mootools 2.0 ma projekt artystyczny do pracy z płótnem


3
ProcessingJS to interesujące podejście do problemu, ale zasadniczo jest to proceduralne DSL zaimplementowane w JavaScript, nie jestem pewien, czy można je skalować do nietrywialnych aplikacji. Sprawdza opcję MooTools.
Toby Hede

Tak, przetwarzanie jest językiem prototypowania danych. Fakt, że istnieje port Javascript jest fajny, ale nie czyni go to frameworkiem HTML 5.
Peter Bailey

Pytanie dotyczyło frameworka płótna, a nie html5, i tym właśnie jest przetwarzanieJS.
Andreas Köberle

Przepraszam za mój błąd semantyki. Ramy płótna są tym, do czego zmierzałem.
Peter Bailey

6

Raphael wydaje się całkiem niezłą biblioteką na płótnie; jest oparty na SVG (lub VML w Internet Explorerze), a zatem obsługuje wiele zdarzeń wejściowych użytkownika. Jest dość mały (60kb spakowany gzipem), więc nie jest zbyt dużą zależnością.
Wygląda na to, że ma też fajny tweener: http://raphaeljs.com/reference.html#animate (zobacz tutaj i tutaj, aby zobaczyć przykłady).

Aby zobaczyć przykład tego, co potrafi, spójrz na to sprytne, małe demo .

Mam nadzieję że to pomoże!


10
Jednak SVG to nie to samo co płótno
Toby Hede

4

Okazało się, że dwie biblioteki są niezwykle konkurencyjne i znacznie lepsze niż fabric.

Kinetic.js i easel.js mają wyjątkowo dobrą obsługę zdarzeń, grupowanie i ogólną abstrakcję kształtu. W obu tych znajdziesz wiele rzeczy do pokochania; Wydaje się, że sztaluga jest bardziej zorientowana na obraz i filtruje.

Funkcje obsługi zdarzeń w Fabric są DUŻO gorsze niż którekolwiek z nich - w zasadzie traktuje całe płótno jako jeden duży program zdarzeń i informuje, kiedy kliknięto „Coś”. Nie dołącza wydarzeń do pojedynczych kształtów lub grup kształtów.


2
FWIW, Fabric pozwala teraz dołączać zdarzenia bezpośrednio do obiektów i ma ogólną funkcjonalność grupową.
kangax


3

Również młody, ale niezły framework Javascript i wszystko na ten temat (złożona animacja, zarządzanie wykresami scen, obsługa zdarzeń i interakcji użytkownika) - jCanvaScript . Może poza „zarządzaniem wykresami sceny”.




2

Jeśli chcesz używać Javascript, Dojo to świetny sposób. Posiada kompaktowy, wieloplatformowy (SVG, VML, Canvas, Silverlight) interfejs API grafiki wektorowej, który jest bardzo wydajny. Możesz go znaleźć w dojo.gfx i dojox.gfx.

Wykorzystaliśmy to do zbudowania interaktywnego nauczyciela fizyki, który pozwala uczniom rysować wektory, elipsy itp. (Nawet dołączać obrazy) i wykonywać na nich różnego rodzaju transformacje. Możesz zobaczyć, co zrobiliśmy na http://gideon.eas.asu.edu/web-UI/login.html - po prostu zaloguj się, używając dowolnej nazwy użytkownika.

Rzuciłem okiem na fabric.js i dojox.drawing robi wiele tych samych rzeczy. Jeśli spojrzysz na testy w zestawie narzędzi (gdy już je masz, jego dojox / rysowanie / testy /), znajdziesz przykłady wszystkiego, od grafiki wektorowej, przez obrazy, po programowo utworzone cienie.


1

Jestem pod wrażeniem Akihabary jako silnika gry. Posiada fantastyczną dokumentację w postaci samouczków i api. Widziałem nawet na niektórych forach dyskusyjnych rozmowę o wydaniu akihabara 2. Niestety, wszystko to ma rok lub więcej. Naprawdę mam nadzieję, że ten silnik jest nadal rozwijany.


1

Właśnie wydałem pierwszą iterację nowej biblioteki do rysowania i animacji, przeznaczonej dla osób z doświadczeniem w rozwoju AS3 / Flash. Chociaż moja biblioteka nie obsługuje jeszcze złożonych ścieżek rysowania ani wykresów, mam nadzieję, że pomoże ludziom szybko rysować i animować podstawowe prymitywy w znany sposób.

Opinie i komentarze są mile widziane. http://www.quietless.com/kitchen/introducing-js3/

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.