Stato attuale delle librerie Canvas Javascript? [chiuso]


90

Ho fatto ricerche sulle librerie HTML canvas e mi sono imbattuto in questa domanda. Qual è lo stato dell'arte nelle librerie e nei framework JavaScript HTML canvas? che è stato chiesto nel 2010. La risposta principale è stata Fabric.js. Dopo aver fatto un po 'più di ricerca mi sono imbattuto in http://www.html5canvastutorials.com/ che presenta tutorial su KineticJs, che vanta più tele per la velocità. Un po 'più di ricerca in seguito ha rivelato che le librerie Canvas sembrano essere ovunque quando si tratta di velocità e funzionalità. Qual è lo stato attuale delle librerie e dei framework JavaScript Canvas oggi? Ne è uscito uno in cima?

EDIT: Poiché le biblioteche sono in continua evoluzione e molte persone sono venute di recente qui per notizie e informazioni sulle nuove biblioteche, ho cambiato la domanda in modo che fosse più senza tempo.


2
assolutamente. Credo che le opzioni assomiglino a questa: 2d-context -> KineticJS, fabric.js, paper.js o easel.js. 3d-context (webgl) -> Three.js
Eric Rowell

1
Puoi controllare il collegamento di kangax alla comparazione delle librerie canvas. Ripubblicando
ericbowden

4
Sono sorpreso che questa domanda non sia stata ancora chiusa, poiché praticamente tutto qui generalmente viene chiuso. Voglio rispondere ma sono troppo spaventato (leggi "terrorizzato") perché potrebbe essere considerato fuori tema. Forse se riformuli la domanda come "quali sono le somiglianze / compromessi" potrei aggiungere i miei due centesimi (leggi "risposta")
puk

4
Mi sento come @puk. Inoltre, penso che la spaccatura semantica tra ciò che è essenzialmente "aperto" e ciò che è contrassegnato come "non costruttivo" sia divertente. Si traduce approssimativamente nel dire domande per le quali non è possibile una singola risposta irriducibile non sono degne di considerazione nel più popolare e completo archivio di conoscenze di programmazione al mondo. Capisco che non si adattano a una buona "Q + A", ma perché non contrassegnarli semplicemente come "altamente soggettivi", limitare i punti di ripetizione e tenerli aperti ... qualcosa.
Mark Fox

1
Sto solo soppesando COSÌ che anch'io sono davvero irritato dalla chiusura costante di domande utili solo perché sono soggettive. E allora!? È roba dannatamente utile.
Iain Duncan

Risposte:


80

Disclaimer: sono l'autore di Fabric.js .

Direi che Easel.js, Fabric.js e Paper.js sono tra i più utilizzati al momento. Sto giudicando in base al numero di osservatori Github per ogni repository, al volume di discussioni nei loro gruppi Google e alla frequenza con cui ne sento parlare usati come librerie canvas su Twitter.

Questi sono anche quelli con documentazione più o meno decente, esempi / demo, gruppi di discussione e unit test (lo stato dei test nella maggior parte delle altre librerie canvas è piuttosto triste).

Sto anche mantenendo questa tabella di confronto di varie librerie canvas , dove puoi vedere quanto recentemente è stata aggiornata la libreria, le sue dimensioni, il supporto per IE <9 o node.js e altro.


il confronto fornisce molte informazioni ma è pubblicamente modificabile che dovrebbe essere limitato, perché alcuni altri utenti le modificheranno erroneamente. Ho bisogno di aiuto è kineticjs non supporterà nodjs? e puoi fare un esempio come il programma Windows Paint (disegnare il cerchio dell'oggetto dal vivo con il tuo tessuto)
Thirumalai murugan

non è pubblicamente modificabile
kangax

1
Così fortunato che ho trovato questo post! Lavoravo con Kinetic ma non è ancora maturo. Quindi ho provato Cavalletto, ma è troppo pesante. Finalmente sono passato a Fabric, ed è fantastico!
MeLight

@kangax Scusa per la mancanza di comprensione, puoi darmi un esempio come il programma Windows Paint (disegnare il cerchio dell'oggetto dal vivo con il tuo tessuto)
Thirumalai murugan

@Thirumalaimurugan eccoti qui: jsfiddle.net/fabricjs/nXmTC/1
kangax

66

EDIT: KineticJS non viene più mantenuto attivamente.

Disclaimer: ho creato KineticJS

KineticJS sta effettivamente andando abbastanza bene. Puoi trovare il codice sorgente su Github , dove al momento è interpretato da 2180 persone.

Può gestire migliaia di forme simultanee:

10.000 test di stress drag and drop: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10.000 forme con descrizioni comandi: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Ha un ottimo supporto per gli eventi, inclusi gli eventi mobili, e ha una suite piuttosto solida di centinaia di unit test, quindi la base del codice sembra piuttosto solida.

kangax: PS fantastico lavoro con fabric.js! Oltre a KineticJS (ovviamente), le mie altre due librerie preferite sono tessuto e carta.


7
Ho appena guardato le demo e la performance sembra davvero fantastica! Sono anche felice di sapere che hai test unitari. Vedo che consenti la creazione di più livelli. Bello. Nel tessuto, ottimizziamo allo stesso modo ma abbiamo solo 2 livelli - uno per la selezione, uno per il disegno - e internamente (gli utenti non possono crearne altri). In qualche modo ho perso Kinetic durante la creazione del grafico di confronto delle biblioteche. Dovremmo risolverlo :)
kangax

6
aggiornamento: KineticJS è ora in github: github.com/ericdrowell/KineticJS
Eric Rowell

7
Come si confronta KineticJS con EaselJS? Quando si dovrebbe usare cosa?
geeky_monster

1
vorrei sottolineare che KineticJS supporta anche i vettori SVG tramite la forma Kinetic.Path
Eric Rowell

2
@EricRowell Mate Adoro KineticJS, la sua velocità, il matrimonio con GSAP, ma cosa mi fa girare la testa è che c'è un modo per trasformare liberamente oggetti KineticJS come in FabricJS? Ecco il link di riferimento a ciò che sto cercando di dire: fabricjs.com/customization Non voglio usare FabricJs perché è molto lento e le sue basse prestazioni sono evidenti da vari test unitari. Non vedo l'ora di trovare un modo per poter trasformare liberamente gli oggetti in KineticJS perché renderebbe la vita molto più semplice. Grazie, Praney
praneybehl

62

Per i lettori recenti, a partire da gennaio 2013, ho valutato:

  • Cinetico
  • Tessuto
  • Carta
  • Cavalletto

Con "valutato", ho fatto di più che leggere i documenti; Ho creato un'app prototipo.

Ho iniziato con Fabric perché sembrava avere la community più grande e ho pensato che sarebbe stata la mia soluzione. Ma ho rinunciato a Fabric per i seguenti motivi:

  • incoerenze API strane e non documentate che hanno bruciato molto del mio tempo inutilmente.
  • supporto di eventi puntatore incoerenti. In particolare, Fabric non considera un "Percorso" come un vero oggetto di forma selezionabile e osservabile. Questo non ha soddisfatto le mie esigenze poiché i percorsi interattivi sono un requisito importante della mia app.
  • dietro le quinte aggiunte di traduzioni alla tela per posizionare gli oggetti. Per me, Fabric cerca di essere troppo intelligente in questo senso senza essere chiaro allo sviluppatore cosa sta facendo.
  • opinione eccessivamente forte su come funziona lo spostamento, il ridimensionamento e la rotazione dell'interattività. In molti modi, è fantastico avere questa funzionalità incorporata nel framework ma, nel mio caso, non ero d'accordo con il modo in cui è stata implementata, il che significava essenzialmente doverla reimplementare comunque.
  • documentazione scarsa - molti di quei casi in cui la documentazione di un metodo ha la forma: "setX (Y) - set's the X to Y" :-)

Ho dato un'occhiata a Paper e non sono andato troppo lontano. Mi sembrava eccessivamente ottuso e rientra anche tra gli sgabelli IMO: è troppo una libreria di visualizzazione per essere un semplice modello di oggetti per Canvas, ma non è una libreria di visualizzazione sufficiente per competere con D3. Inoltre, ancora una volta la documentazione non era particolarmente accessibile.

Penso che Easel abbia probabilmente molto senso se hai uno sfondo Flash / ActionScript, ma io no. Inoltre, sembrava eccessivamente incentrato sul gioco per le mie esigenze. Il chiodo nella bara era di nuovo una documentazione, non abbastanza e presentato in un formato non standard.

Quindi, ho finito per andare con Kinetic perché:

  • tutorial ed esempi davvero ricchi e chiari
  • Le funzioni API fanno quello che vengono chiamate e sono in gran parte indovinabili: produttività più rapida, curva di apprendimento più superficiale
  • è abbastanza chiaro su cosa fa e cosa no - non è ricco come alcuni degli altri, ma è un vantaggio; fa meno cose ma le fa meglio
  • I percorsi sono forme cittadine di prima classe, come qualsiasi altra forma, essenziale per le mie esigenze.

Kinetic non è assolutamente perfetto e ci sono state alcune volte in cui ho dovuto immergermi in profondità nel codice sorgente per capire cosa stesse effettivamente succedendo sotto le coperte. Inoltre, mi manca l'analisi SVG e l'output di Fabric.


1
Grazie per questa risposta, mi ha fatto risparmiare un sacco di tempo. Andrò con Kinetic e spero che scoprirai quello che hai già detto.
Bashevis

Ho eseguito un test utente non scientifico delle demo drag-and-drop fornite per le librerie sopra su iPad3 e Samsung Galaxy Tab2. KineticJS è risultato un chiaro vincitore anche qui, essendo più reattivo e più preciso nel suo posizionamento tattile.
Per Quested Aronsson,

1
Sto valutando entrambi, e per il momento sinceramente fabricjs sembra essere più completo e ben documentato.
albanx

9
Jeremy, mi piacerebbe saperne di più sulle incongruenze delle API in Fabric. Cerco di renderlo il più intuitivo possibile, quindi se qualcosa è ancora strano, vorrei assolutamente occuparmene. Puoi presentare un ticket o menzionarlo qui? I documenti sono migliorati da gennaio, anche se non sono ancora così buoni come vorrei. Forte opinione sull'interattività - Immagino che tu possa dirlo, anche se ci sono parecchie modifiche che puoi fare. Cosa volevi esattamente di diverso? Infine, eventi puntatore - non sono sicuro di cosa intendi. Il percorso è sicuramente una forma reale: fabricjs.com/quadratic-curve
kangax

23

Consiglio vivamente pixijs. È una libreria di tele ad alte prestazioni.

Pixi.js è un renderer WebGL 2D con un fallback su tela senza interruzioni che gli consente di funzionare su tutti i browser moderni sia desktop che mobili.

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


3
A partire da luglio 2014, questa sembra la migliore libreria di tele in circolazione. Con 4k persone lo hanno recitato su Github ed è utilizzato da grandi aziende e agenzie. pixijs.com/projects come Google.
Vennsoh
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.