बैकबोन.जेएस को बाध्य करने के लिए कैसे एक HTML5 कैनवास के अंदर प्रस्तुत दृश्य पर क्लिक करें?

Question

मैं सिर्फ Backbone.js साथ शुरू हो रही है, लेकिन यह वास्तव में दिलचस्प लग रहा है ...

अभी, मैं पिछले एक परियोजना है कि एक ही एचटीएमएल 5 कैनवास में विभिन्न वस्तुओं (2-3 अलग मॉडल प्रकार) ड्रॉ redoing कर रहा हूँ।

प्रत्येक ऑब्जेक्ट क्लिक करने योग्य है। कैनवास के लिए एक ईवेंट हैंडलर है जो क्लिक का स्थान (कैनवास ऑब्जेक्ट में स्थानीय) प्राप्त करता है और फिर ऑब्जेक्ट की खोज करता है जो हिट उत्पन्न कर सकता है।

क्या कोई विशेष तरीका या सर्वोत्तम अभ्यास है जिसका उपयोग बैकबोन.जेएस व्यू पर क्लिक ईवेंट के लिए करते समय करना चाहिए?

धन्यवाद!

अद्यतन: पाया fabric.js जो एक कैनवास तत्व के भीतर वस्तुओं का विचार को संभालने के लिए लगता है, लेकिन backbone.js के रूप में MVC शैली रूपरेखा प्रदान नहीं करता है।

इसके अलावा, मैंने knockout.js पर एक नज़र डाली। यह backbone.js की तुलना में HTML तत्वों (कैनवास नहीं) से भी अधिक जुड़ा हुआ लगता है।

Answer 1

मैं इस प्रश्न पर आया क्योंकि मैं कैनवास के साथ काम करने के लिए बैकबोन-आधारित ढांचे पर काम कर रहा हूं, इसलिए मैंने इसे स्वयं से जोड़ दिया। अंततः मैं जवाब आया था: कैनवास के साथ Backbone.View का उपयोग करने के बारे में भूल जाओ। यदि इसे किसी DOM तत्व द्वारा प्रदर्शित नहीं किया जा सकता है, तो बैकबोन का उपयोग करने के लिए यह समझ में नहीं आता है। इसके लिए देखें; इसकी गुण सिर्फ कैनवास "तत्वों" पर मैप नहीं करते हैं।

आप बैकबोन का उपयोग कर सकते हैं। एक canvas डीओएम तत्व का प्रतिनिधित्व करने के लिए देखें, ठीक है, आपको याद है, लेकिन यह वह परिदृश्य नहीं है जिसका आप वर्णन कर रहे हैं। आपको जो चाहिए वह एक कस्टम व्यू क्लास है जो आपके इन-कैनवास ऑब्जेक्ट्स का प्रतिनिधित्व कर सकती है और उनकी घटनाओं को संभाल सकती है।

Answer 2

बस बैकबोन.जेएस के साथ शुरू करना, लेकिन मैं शायद रीढ़ की हड्डी का दृश्य (कैनवास दृश्य कहूंगा) जो कैनवास पर घटनाओं को प्रस्तुत करता है और सुनता है। क्लिक इवेंट दृश्य ऑब्जेक्ट्स पर किसी विधि को प्रेषित किया जा सकता है और उस विधि में आप अपना ऑब्जेक्ट-मिलान करने वाला एल्गोरिदम और अन्य तर्क करते हैं।

Answer 3

मैं कैनवास पर Backbone.js का उपयोग करके कार्ड गेम पर भी काम कर रहा हूं और इस प्रश्न में आया हूं। मैं वर्तमान में जो कर रहा हूं उसके पास CardView है जिसमें कैनवास टैग के रूप में el है ताकि प्रारंभिक पर कैनवास बनाया जा सके। इस दृश्य की render विधि पर कार्ड का सभी चित्रण किया जाता है। हालांकि, यह कैनवास DOM में जोड़ा नहीं जाएगा।

मेरे पास Hand है, जो कार्डों का संग्रह रखने के लिए Backbone.Collection है। इस संग्रह में Backbone.View गेम कैनवास से जुड़ा हुआ है (DOM में एकमात्र और बड़ा)। इस दृश्य में Backbone.View की एक सरणी भी है। तब मैं है:

render: function() { 
    var that = this; 
    this.ctx.save(); 
    _(this._views).each(function(view) { 
     that.ctx.drawImage(view.render().el, 0, 0); 
     that.ctx.translate(view.el.width, 0); 
    }); 
    this.ctx.restore(); 
}, 

असल में, मैं खेल संदर्भ से drawImage का उपयोग कर कैनवास में प्रत्येक दृश्य के कैनवास आकर्षित।

I addEventListener से HandView के कैनवास (जो el है) क्लिक को संभालने के लिए। इस हैंडलर में, मैं माउस की स्थिति की जांच करता हूं जिसके खिलाफ CardView है, फिर उस दृश्य में हेरफेर करें।

आपको याद है, यह केवल कुछ है जो मैं प्रयोग कर रहा हूं क्योंकि मैं Backbone.js पर भी नया हूं। यह शायद सबसे बुरा तरीका है, लेकिन मुझे उम्मीद है कि आप इसे करने के तरीकों में से एक को देख सकते हैं।

मैं चाहता हूं कि हम एक कैनवास के खिलाफ माउस की जांच कर सकें जो डोम में मौजूद नहीं है। यदि यह संभव है, तो हम केवल addEventListener से CardView के कैनवास कर सकते हैं और इसे अनुवाद और पुन: प्रस्तुत करने दें। HandView के कैनवास को इसके विचारों के माध्यम से लूप करने की आवश्यकता नहीं है।

Answer 4

मुझे इस पार्टी के लिए देर हो चुकी है, लेकिन आईएमओ न तो विचार और न ही मॉडल/संग्रह इस तरह के तर्क के लिए जगह नहीं है।

यदि आप कपड़े या कुछ अन्य लाइब्रेरी का उपयोग कर रहे हैं (मेरे पास raphael.js का उपयोग कर एक एप्लीकेशन है), तो आपको एक बेस्पेक मॉड्यूल बनाना चाहिए जो ड्रॉइंग/हेरफेर को संभालता है और स्थानीय ईवेंट हैंडलिंग (यानी) का उपयोग करके कैनवास ईवेंट को प्रतिसाद देता है। https://github.com/kangax/fabric.js/wiki/Working-with-events)।

यदि आपको उन घटनाओं को संवाद करने की आवश्यकता है तो आपको उन्हें प्रोग्रामिक रूप से बेनकाब करना चाहिए और उन्हें रीढ़ की हड्डी के घटकों को प्रकाशित करने के लिए रीढ़ की हड्डी की घटनाओं का उपयोग करना चाहिए।

आपको ऊपर दिए गए तरीकों से अपने मॉडल और विचारों को कसकर जोड़ना नहीं चाहिए।