जावास्क्रिप्ट कैनवस लाइब्रेरी की वर्तमान स्थिति? [बन्द है]


90

मैं एचटीएमएल कैनवास पुस्तकालयों पर शोध कर रहा हूं और मैं इस सवाल पर आया हूं। HTML कैनवास जावास्क्रिप्ट लाइब्रेरी और फ्रेमवर्क में कला की वर्तमान स्थिति क्या है? कि 2010 में पूछा गया था। शीर्ष उत्तर Fabric.js था। थोड़ा और शोध करने के बाद, मैं http://www.html5canvastutorials.com/ पर आया, जिसमें काइनेटिकज पर ट्यूटोरियल की सुविधा है, जो गति के लिए कई कैनवस रखता है। कुछ और शोधों में बाद में पता चला कि कैनवस लाइब्रेरियों की गति और सुविधाओं की बात करें तो यह सभी जगह लगती है। आज जावास्क्रिप्ट कैनवस लाइब्रेरी और फ्रेमवर्क की वर्तमान स्थिति क्या है? क्या कोई शीर्ष पर आया है?

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


2
पूर्ण रूप से। मेरा मानना ​​है कि विकल्प इस तरह दिखते हैं: 2 डी-संदर्भ -> काइनेटिकजेएस, फैब्रिक.जेएस, पेपर.जेएस, या इजील.जेएस। 3 डी-संदर्भ (वेबल) -> थ्री.जेएस
एरिक रोवेल

1
आप कैनवस पुस्तकालयों की मजबूरी के बारे में कंगैक्स की कड़ी देख सकते हैं। यहाँ पर
ericbowden

4
मुझे आश्चर्य है कि इस सवाल को अभी तक बंद नहीं किया गया है क्योंकि यहाँ सब कुछ आम तौर पर बंद हो जाता है। मैं जवाब देना चाहता हूं, लेकिन मैं बहुत डर गया हूं ("घबराए हुए" पढ़ें) क्योंकि इसे विषय से अलग माना जा सकता है। फिर भी अगर आपने इस प्रश्न को "क्या समानताएं / ट्रेडऑफ़्स" कहा है, तो मैं अपने दो सेंट जोड़ सकता हूं (पढ़ें "उत्तर")
पक

4
मैं @ पुक के समान महसूस करता हूं। इसके अतिरिक्त, मुझे लगता है कि अनिवार्य रूप से "ओपन-एंडेड" और जो "रचनात्मक नहीं" के रूप में चिह्नित हैं, के बीच सिमेंटिक दरार मनोरंजक है। यह मोटे तौर पर उन सवालों का अनुवाद करने के लिए अनुवाद करता है, जिनके लिए एक भी तर्कहीन जवाब संभव नहीं है, प्रोग्रामिंग ज्ञान के सबसे लोकप्रिय और व्यापक भंडार पर विचार करने योग्य नहीं हैं। मुझे लगता है कि वे एक अच्छा 'क्यू + ए' फिट नहीं करते हैं, लेकिन क्यों न उन्हें 'अत्यधिक व्यक्तिपरक' के रूप में चिह्नित किया जाए, प्रतिनिधि बिंदुओं को कैप करें और उन्हें खुला रखें ... कुछ।
मार्क फॉक्स

1
एसओ के लिए सिर्फ इसलिए कि मैं भी मददगार सवालों के निरंतर समापन से वास्तव में चिढ़ गया हूं क्योंकि वे व्यक्तिपरक हैं। तो क्या!? यह खूनी उपयोगी सामान है।
इयान डंकन

जवाबों:


80

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

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

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

मैं विभिन्न कैनवास पुस्तकालयों की इस तुलना तालिका को बनाए रख रहा हूं , जहां आप देख सकते हैं कि हाल ही में पुस्तकालय को कैसे अपडेट किया गया था, इसका आकार, IE <9 या नोड के लिए समर्थन। js, और बहुत कुछ।


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

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

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

@कांगैक्स मिस अंडरस्टैंडिंग के लिए क्षमा करें, क्या आप मुझे एक उदाहरण दे सकते हैं जैसे विंडोज़ पेंट प्रोग्राम (ऑब्जेक्ट सर्कल को अपने कपड़े के साथ जीना)
थिरुमलाई मुरुगन

@Thirumalaimurugan यहां आप जाएं: jsfiddle.net/fabricjs/nXmTC/1
kangax

66

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

अस्वीकरण: मैंने काइनेटिकजेएस बनाया

काइनेटिकजस वास्तव में बहुत अच्छा कर रहा है। आप जीथब में स्रोत कोड पा सकते हैं , जहां यह इस समय 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 के यूनिट टेस्ट का एक बहुत अच्छा सॉलिड सूट है, इसलिए कोड बेस काफी सॉलिड लगता है।

kangax: PS कपड़े के साथ कमाल काम करते हैं। काइनेटिकजेएस (निश्चित रूप से) के अलावा, मेरे अन्य दो पसंदीदा पुस्तकालय कपड़े और कागज हैं।


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

6
अपडेट: काइनेटिक जेएस अब जीथब में है: github.com/ericdrowell/KineticJS
एरिक रोवेल

7
काइनेटिकज एस ईजीएलजेजेएस के साथ तुलना कैसे करता है? कब क्या उपयोग करना चाहिए?
geeky_monster

1
यह बताना चाहते हैं कि काइनेटिक जेएस एसवीजी वैक्टर के साथ-साथ काइनेटिक पैथ () आकार का समर्थन करता है। html5canvastutorials.com/kineticjs/…
एरिक रोवेल

2
@EricRowell मेट मुझे काइनेटिकजेएस से प्यार है, इसकी गति, जीएसएपी के साथ शादी, लेकिन क्या मेरे सिर स्पिन बना रहा है फैब्रिकजैस में जिस तरह से काइनेटिकज वस्तुओं को स्वतंत्र रूप से बदलना है? यहाँ लिंक संदर्भ है जो मैं कहने की कोशिश कर रहा हूं: fabricjs.com/customization मैं फैब्रिकज को वास्तव में धीमी गति से उपयोग करना नहीं चाहता, और विभिन्न यूनिट परीक्षणों से इसका कम प्रदर्शन स्पष्ट है। मैं वास्तव में काइनेटिकजस में वस्तु को स्वतंत्र रूप से बदलने में सक्षम होने के लिए रास्ता ढूंढ रहा हूं क्योंकि यह जीवन को इतना आसान बना देगा। धन्यवाद, प्रणय
प्रणयबेहल

62

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

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

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

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

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

मैंने पेपर देखा और बहुत दूर नहीं गया। यह मेरे लिए बहुत ही अप्रिय लगता था और बहुत मल के बीच भी गिरता था IMO - यह कैनवस के लिए एक साधारण ऑब्जेक्ट मॉडल होने के लिए बहुत अधिक विज़ुअलाइज़ेशन लाइब्रेरी है लेकिन डी 3 के साथ प्रतिस्पर्धा करने के लिए यह विज़ुअलाइज़ेशन लाइब्रेरी के लिए पर्याप्त नहीं है। इसके अलावा, प्रलेखन फिर से विशेष रूप से सुलभ नहीं था।

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

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

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

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


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

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

1
मैं दोनों का मूल्यांकन कर रहा हूं, और फिलहाल ईमानदारी से फैब्रिक अधिक संपूर्ण और अच्छी तरह से प्रलेखित प्रतीत होता है।
अल्बानैक्स

9
जेरेमी, मुझे फैब्रिक में एपीआई विसंगतियों के बारे में अधिक सुनना अच्छा लगेगा । मैं इसे जितना संभव हो उतना सहज बनाने की कोशिश करता हूं, अगर कुछ अभी भी अजीब है, तो मैं निश्चित रूप से इसका ध्यान रखना चाहता हूं। क्या आप टिकट दर्ज कर सकते हैं या इसका उल्लेख कर सकते हैं? डॉक्स जनवरी से सुधार कर रहे हैं, हालांकि अभी भी उतना अच्छा नहीं है जितना मैं उन्हें पसंद करूंगा। अन्तरक्रियाशीलता की सशक्त राय - मुझे लगता है कि आप कह सकते हैं कि, हालाँकि आपके द्वारा किए जा सकने वाले काफी ट्विकिंग हैं। वास्तव में आप अलग क्या चाहते थे? अंत में, सूचक घटनाओं - निश्चित नहीं कि आपका क्या मतलब है। पथ निश्चित रूप से एक वास्तविक आकार है: fabricjs.com/quadratic-curve
kangax

23

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

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

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


3
जुलाई 2014 तक, यह सबसे अच्छा कैनवास लाइब्रेरी जैसा लगता है। 4k के साथ लोगों ने इसे जीथब पर अभिनीत किया और इसका उपयोग बड़ी कंपनियों और एजेंसियों द्वारा किया जाता है। Google की तरह pixijs.com/projects
वेनसोह
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.