Status Perpustakaan Canvas Javascript Saat Ini? [Tutup]


90

Saya telah melakukan penelitian tentang perpustakaan kanvas HTML dan saya menemukan pertanyaan ini. Apa keadaan seni saat ini di pustaka dan kerangka kerja JavaScript kanvas HTML? yang ditanyakan pada tahun 2010. Jawaban teratas adalah Fabric.js. Setelah melakukan sedikit lebih banyak penelitian, saya menemukan http://www.html5canvastutorials.com/ yang menampilkan tutorial tentang KineticJs, yang membanggakan memiliki beberapa kanvas untuk kecepatan. Sedikit lebih banyak penelitian kemudian mengungkapkan bahwa perpustakaan Canvas tampaknya ada di mana-mana dalam hal kecepatan dan fitur. Bagaimana kondisi library dan framework JavaScript Canvas saat ini? Apakah ada yang keluar di atas?

EDIT: Karena perpustakaan selalu berubah dan banyak orang baru-baru ini datang ke sini untuk berita dan info tentang perpustakaan baru, saya mengubah pertanyaan menjadi lebih abadi.


2
benar. Saya yakin opsinya terlihat seperti ini: 2d-context -> KineticJS, fabric.js, paper.js, atau easel.js. 3D-context (webgl) -> Three.js
Eric Rowell

1
Anda dapat melihat tautan kangax ke perbandingan perpustakaan kanvas.
Diposting

4
Saya terkejut pertanyaan ini belum ditutup karena hampir semua yang ada di sini umumnya ditutup. Saya ingin menjawab tetapi saya terlalu takut (baca "ketakutan") karena mungkin dianggap di luar topik. Mungkin jika Anda mengubah pertanyaan menjadi "apa persamaan / pengorbanan" saya bisa menambahkan dua sen (baca "jawaban")
puk

4
Saya merasakan hal yang sama dengan @puk. Selain itu, menurut saya keretakan semantik antara apa yang pada dasarnya hanya "terbuka" dan apa yang ditandai sebagai "tidak konstruktif" itu lucu. Ini secara kasar diterjemahkan menjadi pertanyaan yang mengatakan yang satu jawaban yang tidak dapat direduksi tidak mungkin tidak layak dipertimbangkan dalam gudang pengetahuan pemrograman yang paling populer dan komprehensif di dunia. Saya mengerti bahwa mereka tidak sesuai dengan 'Q + A' yang baik tetapi mengapa tidak hanya menandai mereka sebagai 'sangat subjektif', membatasi poin rep dan membuat mereka tetap terbuka… sesuatu.
Mark Fox

1
Hanya menimbang untuk SO yang saya juga benar-benar kesal dengan penutupan konstan pertanyaan bermanfaat hanya karena mereka subjektif. Terus!? Ini hal yang sangat berguna.
Iain Duncan

Jawaban:


80

Penafian: Saya adalah penulis dari Fabric.js .

Saya akan mengatakan bahwa Easel.js, Fabric.js, dan Paper.js adalah yang paling banyak digunakan saat ini. Saya menilai dari jumlah pengamat Github untuk setiap repositori, volume diskusi di Grup Google mereka, dan seberapa sering saya mendengar tentang mereka digunakan sebagai perpustakaan kanvas di Twitter.

Ini juga yang memiliki dokumentasi, contoh / demo, grup diskusi, dan pengujian unit yang kurang lebih layak (status pengujian di sebagian besar pustaka kanvas lainnya cukup menyedihkan).

Saya juga mempertahankan tabel perbandingan dari berbagai pustaka kanvas ini , di mana Anda dapat melihat seberapa baru pustaka tersebut diperbarui, ukurannya, dukungan untuk IE <9 atau node.js, dan banyak lagi.


perbandingan Anda memberikan banyak informasi tetapi dapat diedit secara publik yang harus dibatasi, karena beberapa pengguna lain akan salah mengeditnya. Saya butuh bantuan apakah kineticjs tidak akan mendukung nodjs? dan dapatkah Anda memberikan satu contoh seperti program cat windows (menggambar lingkaran objek hidup dengan kain Anda)
Thirumalai murugan

itu tidak dapat diedit untuk umum
kangax

1
Sangat beruntung saya menemukan posting ini! Dulu bekerja dengan Kinetic tapi masih belum matang. Kemudian mencoba Easel, tapi itu terlalu berat. Akhirnya pindah ke Fabric, dan itu bagus!
MeLight

@kangax Maaf atas pemahaman yang hilang, dapatkah Anda memberi saya satu contoh seperti program cat windows (menggambar lingkaran objek langsung dengan kain Anda)
Thirumalai murugan

@Thirumalaimurugan ini dia: jsfiddle.net/fabricjs/nXmTC/1
kangax

66

EDIT: KineticJS tidak lagi aktif dipertahankan.

Penafian: Saya membuat KineticJS

KineticJS sebenarnya bekerja dengan cukup baik. Anda dapat menemukan kode sumber di Github , yang saat ini dibintangi oleh 2180 orang.

Ini dapat menangani ribuan bentuk bersamaan:

10.000 uji stres seret dan lepas: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10.000 bentuk dengan keterangan alat: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Ini memiliki dukungan acara yang sangat baik, termasuk acara seluler, dan memiliki rangkaian pengujian unit 100-an yang cukup solid sehingga basis kode terasa cukup solid.

kangax: PS kerja luar biasa dengan fabric.js! Selain KineticJS (tentu saja), dua perpustakaan favorit saya yang lain adalah kain dan kertas.


7
Hanya melihat demo dan kinerjanya memang terlihat sangat luar biasa! Juga senang mendengar Anda punya tes unit. Saya melihat Anda mengizinkan pembuatan beberapa lapisan. Itu bagus. Di fabric, kami mengoptimalkan dengan cara yang sama tetapi hanya memiliki 2 lapisan - satu untuk seleksi, satu untuk menggambar - dan secara internal (pengguna tidak dapat membuat lebih banyak). Entah bagaimana saya merindukan Kinetic saat membuat bagan perbandingan perpustakaan. Kita harus memperbaikinya :)
kangax

6
pembaruan: KineticJS sekarang ada di github: github.com/ericdrowell/KineticJS
Eric Rowell

7
Bagaimana KineticJS dibandingkan dengan EaselJS? Kapan sebaiknya menggunakan apa?
geeky_monster

1
ingin menunjukkan bahwa KineticJS mendukung vektor SVG juga melalui bentuk Kinetic.Path () html5canvastutorials.com/kineticjs/…
Eric Rowell

2
@EricRowell Mate Saya suka KineticJS, kecepatannya, perkawinan dengan GSAP, tapi apa yang membuat kepala saya berputar apakah ada cara untuk dengan bebas mengubah objek KineticJS seperti cara di FabricJS? Berikut adalah referensi tautan ke apa yang ingin saya katakan: fabricjs.com/customization Saya tidak ingin menggunakan FabricJs karena sangat lambat, dan kinerjanya yang rendah terbukti dari berbagai pengujian unit. Saya sangat menantikan untuk menemukan cara agar dapat dengan bebas mengubah objek di KineticJS karena itu akan membuat hidup jadi lebih mudah. Terima kasih, Praney
praneybehl

62

Untuk pembaca terkini, per Jan 2013, saya mengevaluasi:

  • Kinetis
  • Kain
  • Kertas
  • Kuda-kuda

Dengan "dievaluasi", saya melakukan lebih dari sekadar membaca dokumen; Saya membuat aplikasi prototipe.

Saya mulai dengan Fabric karena sepertinya memiliki komunitas terbesar dan berpikir bahwa itu akan menjadi solusi saya. Tapi, saya menyerah pada Fabric karena alasan berikut:

  • inkonsistensi API yang aneh dan tidak berdokumen yang menghabiskan banyak waktu saya secara tidak perlu.
  • dukungan acara penunjuk tidak konsisten. Secara khusus, Fabric tidak menganggap "Path" sebagai objek bentuk asli yang dapat dipilih dan diamati. Ini tidak memenuhi kebutuhan saya karena Jalur interaktif merupakan persyaratan utama aplikasi saya.
  • di balik layar penambahan terjemahan ke Canvas untuk memposisikan objek. Bagi saya, Fabric mencoba menjadi terlalu pintar dalam hal ini tanpa menjelaskan kepada pengembang apa yang dilakukannya.
  • pendapat yang terlalu kuat tentang cara kerja interaktivitas memindahkan, mengubah ukuran, dan memutar. Dalam banyak hal, sangat bagus untuk memiliki fungsionalitas ini dibangun ke dalam kerangka kerja tetapi, dalam kasus saya, saya tidak setuju dengan cara penerapannya yang pada dasarnya berarti harus menerapkan ulang sendiri.
  • dokumentasi renggang - lot dari kasus-kasus di mana dokumentasi suatu metode dalam bentuk: "setX (Y) - set X ke Y" :-)

Saya melihat Paper dan tidak terlalu jauh. Tampaknya terlalu tumpul bagi saya dan juga termasuk di antara terlalu banyak bangku IMO - itu terlalu banyak perpustakaan visualisasi untuk menjadi model objek sederhana untuk Canvas tetapi itu tidak cukup perpustakaan visualisasi untuk bersaing dengan D3. Plus, dokumentasinya lagi-lagi tidak bisa diakses secara khusus.

Saya pikir Easel mungkin sangat masuk akal jika Anda memiliki latar belakang Flash / ActionScript tetapi saya tidak. Plus, tampaknya terlalu berfokus pada permainan untuk kebutuhan saya. Paku di peti mati lagi-lagi dokumentasi - tidak cukup dan disajikan dalam format non-standar.

Jadi, saya akhirnya memilih Kinetic karena:

  • tutorial dan contoh yang sangat kaya dan jelas
  • Fungsi API melakukan apa yang mereka sebut dan sebagian besar dapat ditebak - produktivitas yang lebih cepat, kurva pembelajaran yang lebih dangkal
  • cukup jelas tentang apa yang dilakukannya dan apa yang tidak - tidak sekaya beberapa yang lain tetapi itu adalah keuntungan; ia melakukan lebih sedikit hal tetapi melakukannya dengan lebih baik
  • Paths adalah Bentuk warga kelas satu, seperti Bentuk lainnya, yang penting untuk kebutuhan saya.

Kinetic tidak sempurna dengan cara apa pun dan ada beberapa kali ketika saya harus mendalami kode sumber untuk mengetahui apa yang sebenarnya terjadi di balik penutup. Plus, saya merindukan parsing SVG dan keluaran Fabric.


1
Terima kasih atas jawaban ini, menghemat banyak waktu saya. Saya akan menggunakan Kinetic, dan berharap Anda menemukan apa yang sudah Anda katakan.
Bashevis

Saya telah melakukan tes pengguna non-ilmiah dari demo drag-and-drop yang disediakan untuk perpustakaan di atas di iPad3 dan Samsung Galaxy Tab2. KineticJS keluar sebagai pemenang yang jelas juga di sini, karena lebih responsif dan lebih tepat dalam pemosisian sentuh.
Per Quested Aronsson

1
Saya sedang mengevaluasi keduanya, dan untuk saat ini dengan tulus fabricjs tampaknya lebih lengkap dan terdokumentasi dengan baik.
albanx

9
Jeremy, saya ingin mendengar lebih banyak tentang inkonsistensi API di Fabric. Saya mencoba membuatnya seintuitif mungkin jadi jika masih ada yang aneh, saya pasti ingin membereskannya. Bisakah Anda mengajukan tiket atau menyebutkannya di sini? Dokumentasi telah membaik sejak Januari, meskipun masih tidak sebaik yang saya inginkan. Pendapat yang kuat tentang interaktivitas - Saya rasa Anda dapat mengatakannya, meskipun ada banyak penyesuaian yang dapat Anda lakukan. Apa sebenarnya yang Anda inginkan berbeda? Terakhir, peristiwa penunjuk - tidak yakin apa yang Anda maksud. Path pasti bentuk yang nyata: fabricjs.com/quadratic-curve
kangax

23

Saya akan sangat merekomendasikan pixijs. Ini adalah pustaka kanvas berkinerja tinggi.

Pixi.js adalah perender webGL 2D dengan penggantian kanvas tanpa batas yang memungkinkannya bekerja di semua browser modern baik desktop maupun seluler.

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


3
Mulai Juli 2014, ini sepertinya perpustakaan kanvas terbaik di luar sana. Dengan 4k orang membintanginya di Github dan digunakan oleh perusahaan dan agensi besar. pixijs.com/projects seperti Google.
Vennsoh
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.