jCanvaScript: HTML5 कैनवास के साथ काम करने के लिए जावास्क्रिप्ट लाइब्रेरी

सभी को शुभ दिन!
jCanvaScript है, जैसा कि आप "ध्यान आकर्षित करने के लिए चित्र", जावास्क्रिप्ट ढांचे से देख सकते हैं। यह मुश्किल नहीं है, मुझे लगता है, इस विषय के नाम से अनुमान लगाना है कि लाइब्रेरी का उद्देश्य एचटीएमएल 5 कैनवास तत्व के साथ काम करना है। कट के तहत सभी इच्छुक लोगों को पुस्तकालय के बारे में एक छोटी कहानी मिलेगी और यह कैसे बनाया गया था।

मैंने कहीं नेटवर्क पर कहीं पढ़ा, शायद यहां तक ​​कि हैबर पर भी, एक बार फिर कैनवास के बारे में - और आकर्षित करने के लिए बैठ गया। यह सरल निकला, लेकिन बहुत सुविधाजनक नहीं है। ठीक है, ठीक है - पहले सोचा था, ये trifles हैं, मैं कुछ एनिमेटेड बनाने की कोशिश करूंगा। एनीमेशन बनाना भी आसान था - बशर्ते, कि एनीमेशन स्वयं सरल हो और उसे नियंत्रित करने की आवश्यकता न हो। सामान्य तौर पर, जंगल में दूर - और अधिक जलाऊ लकड़ी। कुछ बदलना जरूरी था।
सबसे पहले, ड्राइंग प्रिमिटिव के लिए रैपर दिखाई दिए, फिर लाइब्रेरी का एक प्रोटोटाइप बनाया गया (अंदर की वस्तुओं के एक कारखाने के साथ), फ़ंक्शंस को धीरे-धीरे इसमें जोड़ा गया - शुरुआत के लिए, बस कैनवास एपीआई की क्षमताओं तक पहुंच। तब मैं घटनाओं के साथ काम करना चाहता था ... समय बीतता गया, पुस्तकालय बढ़ता गया।

तो आज हमारे पास क्या है?

एक छोटा, लगभग 36kb (संस्करण 1.0 आकार) संपीड़ित, पुस्तकालय जो कैनवास के साथ बातचीत के लिए एक सुविधाजनक इंटरफ़ेस प्रदान करता है। मैं इस लेख के ढांचे में इंटरफेस का वर्णन नहीं करूंगा, क्योंकि परियोजना के आधिकारिक वेबसाइट पर उदाहरणों के एक समूह के साथ, उनके बारे में पर्याप्त कहा गया है। लेकिन मैं यह उल्लेख करूंगा कि पुस्तकालय आत्मनिर्भर है, अर्थात इसमें किसी अतिरिक्त पुस्तकालय के कनेक्शन की आवश्यकता नहीं है और उनमें से किसी का भी विस्तार नहीं है - हाँ, यह आश्चर्य की बात नहीं है, यह शायद होना चाहिए, लेकिन फिर भी। किसी तरह हाल ही में, लेखन प्लगइन्स अधिक लोकप्रिय हो गए हैं।
मैं यह भी उल्लेख करूंगा कि:

• बेशक, माउस, कीबोर्ड और फ़ोकस इवेंट्स को ऑब्जेक्ट्स से जोड़ा जा सकता है।
  
  उदाहरण के लिए:
  
  

  jc.circle(x,y,radius) .click(function(){ //-  }); 

  
  
• बेशक, drag'n'drop पहले से ही लागू है। मैं कोड नहीं दूंगा, मैं केवल यह कहूंगा कि ड्रैगबल और ड्रापेबल कार्यों का उपयोग किया जाता है, लगभग jQuery के रूप में।
  
  
• स्वाभाविक रूप से, (जावास्क्रिप्ट, सब के बाद) आप विधि श्रृंखलाओं का उपयोग कर सकते हैं।
  
  इस तरह:
  
  

   jc.circle(x,y,radius) .up('top')//        .id('myCircle')//  id .name('myCircles'); //     

  
  
  
• हां, तत्वों को पहचानकर्ता (आईडी) और नाम (नाम) सौंपे जा सकते हैं ताकि उन्हें फिर व्यक्तिगत रूप से (पहले मामले में) या समूह के रूप में (दूसरे मामले में) संबोधित किया जा सके।
  
  उदाहरण के लिए, आप इस तरह से पिछले उदाहरण से वृत्त का उपयोग कर सकते हैं:
  
  

   jc('#myCircle').color('rgba(255,255,0,0.5)');//   id     jc('.myCircles').color('rgba(255,255,0,0.5)');//    name     

लाइब्रेरी को लगातार जोड़ा जा रहा है, रिफ्लेक्ट किया गया है और इसी तरह। इसका मतलब यह है कि कोड में कुछ बदलना बाकी है, एक तरफ और बहुत कुछ जोड़ा जाएगा। इच्छाओं और विचारों का स्वागत है - support@jcscript.com पर लिखें। बग रिपोर्ट - वहाँ भी, मैं और भी अधिक अधीरता के साथ उनके लिए तत्पर हैं।

हां, आखिरकार, कुछ और कोड - बहुत सरल भी। हम कैनवास पर एक लाल वृत्त कैसे खींचते हैं और इसे कुछ समय के लिए स्थानांतरित करते हैं, धीरे-धीरे रंग को हरे रंग में बदलते हैं? और इसलिए:

 jc.circle(x,y,radius,'#ff0000',1) .animate({x:x1,y:y1,color:'#00ff00'},time); 

बेशक, यह सब केवल तभी काम करेगा जब आपके पास jCanScript हो, और Internet Explorer में आपको इसके अलावा exCanvas की आवश्यकता होगी।

पीएस ईमानदारी से, मैं घोषणा के साथ थोड़ा इंतजार करने जा रहा था - साइट को साक्षरता के लिए पूरी तरह से परीक्षण नहीं किया गया था, लेकिन अंतिम सम्मेलन # html5camp में कई बार कैनवास के साथ काम करने के लिए ढांचे के बारे में सवाल उठाया गया था, जिससे मुझे जल्दी थी। वहाँ, वैसे, jCanvaScript के बारे में ट्विटर पोस्ट थे, लेकिन कोई प्रतिक्रिया नहीं मिली। और मैं कुछ प्रतिक्रिया चाहता हूं।)

UPD : GitHub , ट्विटर