Javascript Canvas Kitaplıklarının Mevcut Durumu? [kapalı]


91

HTML tuval kitaplıkları üzerine araştırma yapıyorum ve bu soruyla karşılaştım. HTML canvas JavaScript kitaplıkları ve çerçevelerindeki son teknoloji nedir? Bu, 2010'da sorulmuştu. En iyi cevap Fabric.js idi. Biraz daha araştırma yaptıktan sonra , hız için birden fazla tuvale sahip olmakla övünen KineticJ'ler hakkında öğreticiler içeren http://www.html5canvastutorials.com/ ile karşılaştım . Daha sonra biraz daha fazla araştırma, hız ve özellikler söz konusu olduğunda Canvas kitaplıklarının her yerde olduğunu ortaya çıkardı. Bugün JavaScript Canvas kitaplıklarının ve çerçevelerinin mevcut durumu nedir? Üstte biri mi çıktı?

DÜZENLEME: Kütüphaneler sürekli değiştiğinden ve son zamanlarda birçok insan yeni kütüphaneler hakkında haberler ve bilgiler için buraya geldiğinden, soruyu daha zamansız olacak şekilde değiştirdim.


2
kesinlikle. Seçeneklerin şöyle göründüğüne inanıyorum: 2d-bağlam -> KineticJS, fabric.js, paper.js veya easel.js. 3d-bağlam (webgl) -> Three.js
Eric Rowell

1
Kangax'ın tuval kitaplıklarının karşılaştırmalı bağlantısına göz atabilirsiniz. Burada yeniden yayınlanıyor docs.google.com/spreadsheet/…
ericbowden

4
Buradaki hemen hemen her şey kapandığından, bu sorunun henüz kapanmamasına şaşırdım. Cevap vermek istiyorum ama konu dışı sayılabileceğinden çok korkuyorum ("korkuyorum" okuyun). Belki soruyu "benzerlikler / değiş tokuş nedir" olarak değiştirseniz, iki sentimi ekleyebilirim ("cevabı" okuyun)
puk

4
@ Puk ile aynı hissediyorum. Ek olarak, aslında sadece "açık uçlu" olanla "yapıcı değil" olarak işaretlenenler arasındaki anlamsal uçurumun eğlenceli olduğunu düşünüyorum. Kabaca, tek bir indirgenemez cevabın mümkün olmadığı soruların, dünyanın en popüler ve kapsamlı programlama bilgisi deposunda dikkate alınmaya değer olmadığı anlamına gelir. İyi bir "Q + A" ya uymadıklarını anlıyorum ama neden onları "oldukça öznel" olarak işaretlemiyorsunuz, temsil noktalarını sınırlayıp açık tutmuyorsunuz… bir şey.
Mark Fox

1
Sadece öznel oldukları için yardımcı soruların sürekli kapanışından ben de gerçekten rahatsız olduğumu SO için tartıyorum. Ne olmuş yani!? Çok faydalı şeyler.
Iain Duncan

Yanıtlar:


81

Sorumluluk Reddi Beyanı: Fabric.js'nin yazarıyım .

Easel.js, Fabric.js ve Paper.js'nin şu anda en çok kullanılanlar arasında olduğunu söyleyebilirim. Her depo için Github izleyicilerinin sayısına, Google Gruplarındaki tartışma hacmine ve Twitter'da tuval kitaplıkları olarak kullanıldıklarını ne sıklıkla duyduğuma göre değerlendiriyorum.

Bunlar aynı zamanda az çok iyi belgelere, örneklere / gösterilere, tartışma gruplarına ve birim testlerine sahip olanlardır (diğer tuval kitaplıklarının çoğunda test etme durumu oldukça üzücüdür).

Ayrıca , kitaplığın ne kadar yakın zamanda güncellendiğini, boyutunu, IE <9 veya node.js desteğini ve daha fazlasını görebileceğiniz çeşitli tuval kitaplıklarının bu karşılaştırma tablosunu tutuyorum.


karşılaştırmanız çok fazla bilgi verir, ancak kamuya açık olarak düzenlenebilir ve kısıtlanması gerekir, çünkü diğer bazı kullanıcılar bunları yanlış bir şekilde düzenleyecektir. Yardıma ihtiyacım var kineticjs nodj'leri desteklemeyecek mi? ve Windows boyama programı gibi bir örnek verebilir misiniz (nesne çemberini kumaşınızla canlı olarak
çizin

herkes tarafından düzenlenemez
kangax

1
Bu gönderiyi bulduğum için çok şanslıyım! Kinetic ile çalışırdı ama henüz olgun değil. Sonra Easel'ı denedi, ama çok ağır. Sonunda Fabric'e taşındı ve bu harika!
MeLight

pencereleri (sizin kumaşla canlı nesne daire çizim) programı boya gibi Maalesef @kangax bayan anlaşılması için, bana bir örnek verebilir
Thirumalai Murugan

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

67

DÜZENLEME: KineticJS artık aktif olarak korunmuyor.

Sorumluluk reddi: KineticJS'yi oluşturdum

KineticJS aslında oldukça iyi gidiyor. Kaynak kodunu şu anda 2180 kişinin rol aldığı Github'da bulabilirsiniz .

Binlerce eşzamanlı şekli işleyebilir:

10.000 sürükle ve bırak stres testi: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

Araç ipuçları ile 10.000 şekil: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Mobil etkinlikler de dahil olmak üzere çok iyi bir olay desteğine sahiptir ve 100'lerce birim testinden oluşan oldukça sağlam bir pakete sahiptir, bu nedenle kod tabanı oldukça sağlamdır.

kangax: PS fabric.js ile harika bir çalışma! KineticJS dışında (elbette) en sevdiğim diğer iki kitaplık kumaş ve kağıt.


7
Demolara baktım ve performans oldukça harika görünüyor! Ayrıca birim testleriniz olduğunu duyduğuma sevindim. Birden çok katman oluşturulmasına izin verdiğinizi görüyorum. Bu iyi. Kumaşta da aynı şekilde optimize ediyoruz, ancak yalnızca 2 katmanımız var - biri seçim için, biri çizim için - ve dahili olarak (kullanıcılar daha fazlasını oluşturamaz). Bir şekilde, kitaplık karşılaştırma tablosu oluştururken Kinetic'i kaçırdım. Bunu düzeltmeliyiz :)
kangax

6
güncelleme: KineticJS artık github'da
Eric Rowell

7
KineticJS, EaselJS ile karşılaştırıldığında nasıldır? Ne zaman ne kullanılmalı?
geeky_monster

1
KineticJS'nin, Kinetic.Path () şekli html5canvastutorials.com/kineticjs/…
Eric Rowell

2
@EricRowell Mate KineticJS'i, hızını, GSAP ile evliliğini seviyorum, ancak başımı döndüren şey, FabricJS'deki gibi KineticJS nesnelerini özgürce dönüştürmenin bir yolu var mı? Söylemeye çalıştığım şeye bağlantı referansı: fabricjs.com/customization FabricJs'i gerçekten yavaş olduğu için kullanmak istemiyorum ve çeşitli birim testlerinden anlaşılan düşük performansı. Hayatı çok daha kolay hale getireceği için KineticJS'de nesneyi özgürce dönüştürebilmenin bir yolunu bulmayı gerçekten dört gözle bekliyorum. Teşekkürler, Praney
praneybehl

62

Son okuyucular için, Ocak 2013 itibariyle şunları değerlendirdim:

  • Kinetik
  • Kumaş
  • Kağıt
  • Şövale

"Değerlendirildi" ile, dokümanları okumaktan daha fazlasını yaptım; Bir prototip uygulaması oluşturdum.

Fabric ile başladım çünkü en büyük topluluğa sahip gibi görünüyordu ve bunun benim çözümüm olacağını düşündüm. Ancak aşağıdaki nedenlerden dolayı Fabric'ten vazgeçtim:

  • zamanımın çoğunu gereksiz yere harcayan tuhaf ve belgelenmemiş API tutarsızlıkları.
  • tutarsız işaretçi olay desteği. Özellikle Fabric, bir "Yol" un seçilebilir ve gözlemlenebilir gerçek bir şekil nesnesi olduğunu düşünmez. Etkileşimli Yollar uygulamamın temel gereksinimi olduğundan bu, ihtiyaçlarımı karşılamadı.
  • nesneleri konumlandırmak için perde arkasına Tuvale çeviri eklemeleri. Benim için Fabric, geliştiriciye ne yaptığını netleştirmeden bu konuda çok zeki olmaya çalışıyor.
  • hareket etme, yeniden boyutlandırma ve döndürme etkileşiminin nasıl çalıştığına dair aşırı güçlü fikir. Pek çok yönden, bu işlevselliğin çerçeveye yerleştirilmiş olması harikadır, ancak benim durumumda, uygulanma şekline katılmadım, bu da aslında onu yine de yeniden uygulamak zorunda olmak anlamına geliyordu.
  • seyrek dokümantasyon - bir yöntemin dokümantasyonunun şu biçimde olduğu durumların çoğu: "setX (Y) - set, X'den Y'ye" :-)

Kağıda bir göz attım ve fazla uzağa gitmedim. Bana aşırı derecede geniş göründü ve aynı zamanda IMO dışkılarının arasına giriyor - Canvas için basit bir nesne modeli olmak için çok fazla bir görselleştirme kitaplığı ama D3 ile rekabet etmek için yeterli bir görselleştirme kitaplığı değil. Ayrıca, dokümantasyon yine özellikle erişilebilir değildi.

Bir Flash / ActionScript arka planınız varsa, Easel'ın muhtemelen çok mantıklı olduğunu düşünüyorum, ancak ben yok. Ayrıca, gereksinimlerim için fazlasıyla oyun odaklı görünüyordu. Tabuttaki çivi yine dokümantasyondu - yeterli değildi ve standart olmayan bir formatta sunuldu.

Böylece, Kinetic'e gittim çünkü:

  • gerçekten zengin ve net öğreticiler ve örnekler
  • API işlevleri dedikleri şeyi yapar ve büyük ölçüde tahmin edilebilirdir - daha hızlı üretkenlik, daha sığ öğrenme eğrisi
  • ne yaptığı ve neyin yaramadığı konusunda oldukça nettir - diğerleri kadar zengin değildir, ancak bu bir fayda; daha az şey yapar ama onları daha iyi yapar
  • Yollar, diğer tüm Shape'ler gibi birinci sınıf vatandaş Şekilleridir ve bu benim gereksinimlerim için gerekliydi.

Kinetik hiçbir şekilde mükemmel değildir ve örtülerin altında gerçekte neler olup bittiğini anlamak için kaynak kodunun derinliklerine dalmak zorunda kaldığım birkaç kez olmuştur. Ayrıca, Fabric'in SVG ayrıştırmasını ve çıktısını özlüyorum.


1
Bu cevap için teşekkürler, bana çok zaman kazandırdı. Kinetic ile gideceğim ve umarım daha önce söylediklerinizi keşfedersiniz.
Bashevis

Yukarıdaki iPad3 ve Samsung Galaxy Tab2'deki kütüphaneler için sağlanan sürükle ve bırak demolarının bilimsel olmayan bir kullanıcı testini yaptım. KineticJS, burada da net bir kazanan olarak ortaya çıktı, dokunma konumlandırmasında daha duyarlı ve daha kesin oldu.
Per Quested Aronsson

1
Her ikisini de değerlendiriyorum ve şu an içtenlikle fabricjs daha eksiksiz ve iyi belgelenmiş görünüyor.
albanx

9
Jeremy, Fabric'teki API tutarsızlıkları hakkında daha fazla bilgi almak isterim . Mümkün olduğunca sezgisel hale getirmeye çalışıyorum, bu yüzden bir şey hala tuhafsa, kesinlikle onunla ilgilenmek isterim. Bir talepte bulunabilir misin veya burada bahsedebilir misin? Dokümanlar Ocak ayından beri gelişiyor, ancak yine de istediğim kadar iyi değil. Etkileşim konusunda güçlü görüş - Yapabileceğiniz oldukça fazla ince ayar olmasına rağmen, bunu söyleyebilirsin sanırım. Tam olarak neyi farklı istedin? Son olarak, işaretçi olayları - ne demek istediğinizden emin değilim. Yol kesinlikle gerçek bir şekil: fabricjs.com/quadratic-curve
kangax

23

Pixijs'i şiddetle tavsiye ederim. Yüksek performanslı bir tuval kitaplığıdır.

Pixi.js, hem masaüstü hem de mobil tüm modern tarayıcılarda çalışmasına olanak tanıyan kusursuz bir tuval geri dönüşüne sahip bir 2D webGL oluşturucudur.

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


3
Temmuz 2014 itibariyle, burası en iyi tuval kitaplığı gibi görünüyor. 4K ile Github'da rol aldı ve büyük şirketler ve ajanslar tarafından kullanılıyor. pixijs.com/projects , Google gibi.
Vennsoh
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.