उल्का - स्वचालित रूप से सब्स्क्राइब किए गए डेटा के साथ कैनवास अपडेट कर रहा है?

Question

मैं कुछ कमी हो सकती है, लेकिन ऐसा लगता है कि उल्का के "जादू" हैंडल के माध्यम से डोम तत्वों के लिए बाध्यकारी आसपास डेटा, और अद्यतन पाठ और HTML टुकड़े घूमती है: http://docs.meteor.com/#reactivity

यह महान है, तथापि, जब लिखने की कोशिश कर कि एक < कैनवास > तत्व के लाइव डेटा प्रदर्शित करता है एक उल्का अनुप्रयोग, मैं "उल्का रास्ता" मेरे कैनवास अद्यतन करने के लिए को समझ नहीं सकता जब लाइव डाटा परिवर्तन, कैनवास की तरह जे एस कोड के माध्यम से से भर जाता है के बाद से:

var g = canvas.getContext('2d') 
g.fillRect(x, y, w, h) 

और HTML टेम्पलेट में डेटा-समर्थित टेक्स्ट नहीं।

मैं एक उल्का से डेटा का उपयोग कर कैनवास पर आकर्षित करने की कोशिश कर रहा हूं। चयन।

मेरा एकमात्र विचार एचटीएमएल टेम्पलेट में एचटीएमएल टेम्पलेट में एचटीएमएल टेम्पलेट में एम्बेड किए गए स्क्रिप्ट टैग में कैनवास-ड्राइंग जेएस कोड को एम्बेड करना था, लेकिन यह गलत लगता है क्योंकि उल्का की घटनाओं और डेटा-बाध्यकारी कोड पहले से ही क्लाइंट-साइड जेएस है।

क्या लाइव डेटा परिवर्तनों के लिए कुछ तरीका सुनता है, जो HTML तत्वों/टेक्स्ट के बजाय जेएस के माध्यम से कैनवास पर चित्रित करता है? नीचे टॉम की जवाब मुझे Meteor.deps है, जो एक प्रतिक्रियाशील संदर्भ में मनमाने ढंग से कोड को क्रियान्वित करने की अनुमति के लिए देखने के लिए नोटिस दिया:: http://docs.meteor.com/#on_invalidate

कृपया मुझे बताएं कि मैं किसी तरह

अद्यतन में प्रश्न को स्पष्ट कर सकते हैं

मैं इसे आजमाउंगा और यहां काम करता हूं अगर यह काम करता है।

Answer 1

यह काम करता है:

var Shapes = new Meteor.Collection('shapes') 

if (Meteor.is_client) { 
    // Function that redraws the entire canvas from shapes in Meteor.Collection 
    function drawShapes() { 
    var shapes = Shapes.find({}) 
    shapes.forEach(function(shape) { 
     // draw each on canvas 
    }) 
    } 

    var startUpdateListener = function() { 
    // Function called each time 'Shapes' is updated. 
    var redrawCanvas = function() { 
     var context = new Meteor.deps.Context() 
     context.on_invalidate(redrawCanvas) // Ensures this is recalled for each update 
     context.run(function() { 
     drawShapes() 
     }) 
    } 
    redrawCanvas() 
    } 

    Meteor.startup(function() { 
    startUpdateListener() 
    }) 
} 

Answer 2

शायद आपके प्रश्न का उत्तर Collection.observe (http://docs.meteor.com/#observe) का उपयोग करना है और विभिन्न कॉलबैक में प्रासंगिक रीड्रॉइंग कोड को ट्रिगर करना है।

उदाहरण के लिए, कुछ की तरह:

Rectangles.observe({ 
    added: function(rect) { 
    var g = canvas.getContext('2d'); 
    g.fillRect(rect.x, rect.y, rect.w, rect.h); 
    }, 
    // etc 
}) 

Answer 3

मैं कैनवास को अद्यतन करने के साथ कुछ परेशानी थी तो मैं इस सरल खेल डेमो बनाया: https://github.com/randompast/Meteor-SimpleGame