2012-01-20 19 views
89

मैं एचटीएमएल कैनवास पुस्तकालयों पर शोध कर रहा हूं और मैं इस प्रश्न में आया हूं। What is the current state of the art in HTML canvas JavaScript libraries and frameworks? जिसे 2010 में पूछा गया था। शीर्ष जवाब Fabric.js था। थोड़ा और शोध करने के बाद मैं http://www.html5canvastutorials.com/ पर आया जो कि किनेटिकजे पर ट्यूटोरियल पेश करता है, जिसमें गति के लिए कई कैनवास हैं। बाद में थोड़ा और शोध से पता चला कि गति और सुविधाओं की बात आने पर कैनवास पुस्तकालय पूरी जगह पर प्रतीत होते हैं। आज जावास्क्रिप्ट कैनवास पुस्तकालयों और ढांचे की वर्तमान स्थिति क्या है? क्या कोई शीर्ष पर आ गया है?जावास्क्रिप्ट कैनवास पुस्तकालयों का वर्तमान राज्य?

संपादित करें: चूंकि पुस्तकालय हमेशा बदल रहे हैं और बहुत से लोग हाल ही में नए पुस्तकालयों पर समाचार और जानकारी के लिए यहां आ रहे हैं, मैंने प्रश्न को और कालातीत करने के लिए बदल दिया है।

+0

इस पोस्ट में अद्यतन किया जाना चाहिए, यह अब है कि KineticJS और EaselJS सबसे अधिक लोकप्रिय हैं मुझे लगता है। मुझे kineticJS बहुत पसंद है लेकिन EaselJS (CreateJS suite) में और अधिक सुविधाएं हैं। इन दो libs के बीच एक तुलना अच्छा होगा। – olanod

+1

आप कैनवास पुस्तकालयों के संपीड़न के लिए कंगैक्स का लिंक देख सकते हैं। यहां reposting https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0 – ericbowden

+0

@DannYO मैंने प्रदर्शन मुद्दों और कुछ खराब डिज़ाइन विकल्पों के कारण इसे छोड़ने से लगभग एक साल पहले EaselJS के साथ काम किया। हाल ही में मैं किनेक्टजेएस ट्यूटोरियल्स पर गया और यह बहुत साफ दिखता है। – puk

उत्तर

80

अस्वीकरण: मैं Fabric.js का लेखक हूं।

मैं कहूंगा कि Easel.js, Fabric.js, और Paper.js इस समय सबसे अधिक उपयोग किए जाते हैं। मैं प्रत्येक रिपोजिटरी के लिए गिथब वॉचर्स की संख्या, उनके Google समूह में चर्चा की मात्रा और ट्विटर पर कैनवास पुस्तकालयों के रूप में उपयोग किए जाने के बारे में कितनी बार सुनता हूं, उसके आधार पर मैं निर्णय ले रहा हूं।

ये भी कम या ज्यादा सभ्य दस्तावेज, उदाहरण/डेमो, चर्चा समूह और यूनिट परीक्षण (अधिकांश अन्य कैनवास पुस्तकालयों में परीक्षण की स्थिति बहुत दुखी है) वाले हैं।

मैं यह comparison table of various canvas libraries भी बनाए रख रहा हूं, जहां आप देख सकते हैं कि लाइब्रेरी को हाल ही में कैसे अपडेट किया गया था, इसका आकार, आईई < 9 या नोड.जेएस, और अधिक के लिए समर्थन।

+0

आपकी तुलना बहुत सारी जानकारी देती है लेकिन इसकी सार्वजनिक रूप से संपादन योग्य है जिसे प्रतिबंधित किया जाना चाहिए, क्योंकि कुछ अन्य उपयोगकर्ता गलत तरीके से उनको संपादित करेंगे। मुझे मदद चाहिए कि kineticjs nodjs का समर्थन नहीं करेगा? और क्या आप विंडोज पेंट प्रोग्राम (ऑब्जेक्ट सर्कल को अपने कपड़े के साथ लाइव ड्राइंग) जैसे एक उदाहरण दे सकते हैं –

+0

यह सार्वजनिक रूप से संपादन योग्य नहीं है – kangax

+1

इतना भाग्यशाली है कि मुझे यह पोस्ट मिला है! काइनेटिक के साथ काम करने के लिए प्रयुक्त होता है लेकिन यह अभी तक परिपक्व नहीं है। फिर ईज़ेल की कोशिश की, लेकिन यह बहुत भारी है। अंत में कपड़ा में चले गए, और यह बहुत अच्छा है! – MeLight

67

संपादित करें: KineticJS अब सक्रिय रूप से बनाए रखा नहीं जा रहा है।

अस्वीकरण: मैं वास्तव में बहुत अच्छी तरह से कर रही है KineticJS

KineticJS बनाया। आप Github पर स्रोत कोड पा सकते हैं, जहां इस समय 2180 लोगों द्वारा तारांकित किया गया है।

यह समवर्ती आकार के हजारों संभाल कर सकते हैं:

10,000 ड्रैग और ड्रॉप तनाव परीक्षण: टूलटिप्स साथ http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10.000 आकार: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

यह मोबाइल घटनाओं सहित बहुत अच्छा घटना समर्थन, है, और इसमें 100 यूनिट परीक्षणों का एक सुंदर ठोस सूट है, इसलिए कोड बेस बहुत ठोस लगता है।

कंगैक्स: पीएस fabric.js के साथ कमाल का काम! KineticJS के अलावा (बेशक), मेरे दो पसंदीदा पुस्तकालय कपड़े और कागज हैं।

+7

बस डेमो को देखा और प्रदर्शन बहुत बढ़िया दिखता है! यह सुनकर भी खुशी हुई कि आपको यूनिट परीक्षण मिल गए हैं। मैं देखता हूं कि आप कई परतों के निर्माण की अनुमति देते हैं। यह अच्छा है। कपड़े में, हम उसी तरह अनुकूलित करते हैं लेकिन केवल 2 परतें होती हैं - चयन के लिए एक, ड्राइंग के लिए एक - और आंतरिक रूप से (उपयोगकर्ता अधिक नहीं बना सकते हैं)। लाइब्रेरी तुलना चार्ट बनाते समय किसी भी तरह से मैंने काइनेटिक को याद किया। हमें इसे ठीक करना चाहिए :) – kangax

+6

अद्यतन: KineticJS अब github में है: https://github.com/ericdrowell/KineticJS –

+0

मैं Kineticjs का उपयोग करता हूं। काफी अच्छा ! –

63

हाल पाठकों के लिए, जनवरी 2013 के रूप में, मैं का मूल्यांकन:

  • काइनेटिक
  • कपड़ा
  • कागज
  • चित्रफलक

द्वारा "का मूल्यांकन", मैं अधिक से अधिक किया बस दस्तावेज़ पढ़ें; मैंने प्रोटोटाइप ऐप बनाया है।

मैंने फैब्रिक के साथ शुरुआत की क्योंकि ऐसा लगता है कि यह सबसे बड़ा समुदाय है और सोचा कि यह मेरा समाधान होगा। लेकिन, मैंने निम्नलिखित कारणों से फैब्रिक को छोड़ दिया:

  • अजीब और अनियंत्रित एपीआई असंगतताएं जो मेरे बहुत सारे समय को अनावश्यक रूप से जला देती हैं।
  • असंगत सूचक घटना समर्थन। विशेष रूप से, फैब्रिक एक "पथ" को एक वास्तविक आकार वस्तु नहीं मानता है जो चयन योग्य और देखने योग्य है। यह मेरी जरूरतों को पूरा नहीं करता क्योंकि इंटरैक्टिव पथ मेरे ऐप की एक बड़ी आवश्यकता है।
  • दृश्यों के पीछे कैनवास में ऑब्जेक्ट्स को स्थानांतरित करने के दृश्यों के दृश्यों के पीछे। मेरे लिए, फैब्रिक डेवलपर को स्पष्ट किए बिना इस संबंध में बहुत चालाक होने की कोशिश करता है कि यह क्या कर रहा है।
  • इंटरएक्टिविटी कार्यों को कैसे स्थानांतरित, आकार बदलने और घुमाए जाने पर अत्यधिक मजबूत राय। कई मायनों में, यह कार्यक्षमता ढांचे में बनाई गई है, लेकिन मेरे मामले में, मैं जिस तरह से लागू किया गया था उससे सहमत नहीं था जिसका मतलब अनिवार्य रूप से इसे स्वयं को फिर से लागू करना था।
  • विरल प्रलेखन - बहुत के उन मामलों में जहाँ एक विधि के दस्तावेज़ फ़ॉर्म की है की: - :-)

"setX (वाई) सेट Y के लिए एक्स है" मैं कागज पर एक नज़र लिया और नहीं था बहुत दूर नहीं है। यह मुझे अत्यधिक उलझन में लग रहा था और बहुत मल के बीच भी गिरता है आईएमओ - यह कैनवास के लिए एक साधारण ऑब्जेक्ट मॉडल होने के लिए विज़ुअलाइज़ेशन लाइब्रेरी का बहुत अधिक है, लेकिन यह डी 3 के साथ प्रतिस्पर्धा करने के लिए विज़ुअलाइज़ेशन लाइब्रेरी के लिए पर्याप्त नहीं है। इसके अलावा, दस्तावेज़ीकरण फिर से विशेष रूप से सुलभ नहीं था।

मुझे लगता है कि अगर आपके पास फ्लैश/एक्शनस्क्रिप्ट पृष्ठभूमि है तो मैं शायद बहुत समझ में आता हूं लेकिन मैं नहीं करता हूं। इसके अलावा, यह मेरी आवश्यकताओं के लिए अत्यधिक केंद्रित खेल केंद्रित लग रहा था। ताबूत में नाखून फिर से प्रलेखन था - पर्याप्त नहीं और गैर-मानक प्रारूप में प्रस्तुत किया गया।

तो, मैं काइनेटिक के साथ जा रहा समाप्त हो गया है क्योंकि:

  • वास्तव में अमीर और स्पष्ट ट्यूटोरियल और उदाहरण
  • एपीआई कार्यों कि वे क्या कहा जाता है कर रहे हैं और काफी हद तक अनुमान लगाया जा सकता है - तेजी से उत्पादकता, उथले सीखने की अवस्था
  • यह स्पष्ट रूप से स्पष्ट है कि यह क्या करता है और यह क्या नहीं करता है - यह दूसरों में से कुछ के रूप में समृद्ध नहीं है लेकिन यह एक लाभ है; यह कम चीजें करता है लेकिन उन्हें बेहतर बनाता है
  • पथ प्रथम श्रेणी के नागरिक आकार हैं, किसी भी अन्य आकार की तरह, जो मेरी आवश्यकताओं के लिए आवश्यक था।

काइनेटिक किसी भी माध्यम से सही नहीं है और कुछ बार ऐसा हुआ है जब मुझे स्रोत कोड में गहराई से गोता लगाने के लिए कवर किया गया है ताकि वास्तव में कवर के तहत क्या चल रहा है। इसके अलावा, मुझे एसवीजी पार्सिंग और फैब्रिक का उत्पादन याद आती है।

+1

इस उत्तर के लिए धन्यवाद , मुझे बहुत समय बचाया। मैं काइनेटिक के साथ जाने जा रहा हूं, और आशा करता हूं कि आप जो खोज चुके हैं उसे खोज लें। – Bashevis

+0

मैंने iPad3 और सैमसंग गैलेक्सी टैब 2 पर उपरोक्त पुस्तकालयों के लिए प्रदान किए गए ड्रैग-एंड-ड्रॉप डेमो का गैर-वैज्ञानिक उपयोगकर्ता परीक्षण किया है। KineticJS यहां एक स्पष्ट विजेता के रूप में बाहर आया, और अधिक प्रतिक्रियाशील और अपने स्पर्श स्थिति में अधिक सटीक होने के नाते। –

+1

मैं दोनों का मूल्यांकन कर रहा हूं, और इस पल के लिए ईमानदारी से fabricjs अधिक पूर्ण और अच्छी तरह से प्रलेखित प्रतीत होता है। – albanx

22

मैं अत्यधिक पिक्सिज की अनुशंसा करता हूं। यह एक उच्च प्रदर्शन कैनवास पुस्तकालय है।

Pixi.js एक 2 डी वेबजीएल रेंडरर है जो एक निर्बाध कैनवास फॉलबैक के साथ है जो इसे डेस्कटॉप और मोबाइल दोनों के सभी आधुनिक ब्राउज़रों में काम करने में सक्षम बनाता है।

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

+3

जुलाई 2014 तक, यह वहां की सर्वश्रेष्ठ कैनवास लाइब्रेरी की तरह लगता है। 4k लोगों ने इसे गीथूब पर तारांकित किया और इसका उपयोग बड़ी कंपनियों और एजेंसियों द्वारा किया जाता है। http://www.pixijs.com/projects/ Google की तरह। – Vennsoh

संबंधित मुद्दे