Fabricjs और AngularJS

Question

घालमेल मैं एक ऐप्स जो स्क्रीन पर सरल ग्राफिक्स संपादित करता है, fabricjs का निर्माण करने की कोशिश कर रहा हूँ मैं का उपयोग कैनवास पुस्तकालय है, और AngularJS MVW ढांचे मैं का उपयोग करें।

अब, डीओएम से कपड़े काम करने के लिए बाइंडिंग ठीक है (मैं एक div पर क्लिक करता हूं, और कैनवास पर इसी ऑब्जेक्ट को चुना जाता है), लेकिन दूसरी तरफ नहीं। जब मैं कैनवास पर किसी ऑब्जेक्ट पर क्लिक करता हूं, और यह चयनित हो जाता है तो संबंधित DOM अपडेट नहीं होता है। मैंने here पढ़ा है कि मुझे $scope.$apply(); का उपयोग करना चाहिए, लेकिन मुझे यकीन नहीं है कि इसे कहां रखा जाए।

मैं कपड़े अपडेट $scope राज्य कैसे बना सकता हूं?

आप the code here देख सकते हैं, कैनवास के लिए तत्वों को जोड़ने, और ध्यान दें कि जब आप सही पर तत्व का नाम क्लिक करें इसे पाने के कैनवास पर चयनित करने के लिए Add Rect बटन पर क्लिक करें, लेकिन यदि आपने इसे सीधे कैनवास पर चयन यह बटन है उच्च जलाया नहीं है।

कोड: http://plnkr.co/edit/lMogPGjJOXx9HLAdiYqB

Answer 1

FabricJS, अपने वर्गों पर घटनाओं को लागू करता है तो एक उन्हें मनमाने ढंग से श्रोताओं के लिए बाध्य कर सकता है। आपके मामले में, आप "object:selected" ईवेंट में श्रोता को बाध्य कर सकते हैं, जो $scope.$apply() पर कॉल करेगा और कैनवास पर ऑब्जेक्ट का चयन होने पर निकाल दिया जाएगा।

Event Inspector Demo और Observable Class Documentation देखें। Canvas कक्षा इन सभी विधियों को विरासत में लेती है, ताकि आप श्रोताओं को इसके साथ बांध सकें। तुम भी उदाहरण के रूप में, चयनित ऑब्जेक्ट को पुनः प्राप्त कर सकते हैं:

var canvas = new Fabric.Canvas('canvas_container'); 
canvas.on("object:selected", function (options, event) { 
    var object = options.target; //This is the object selected 
    // You can do anything you want and then call... 
    $scope.$apply() 
}); 

Answer 2

बर्नार्डो Domingues और MeLight की टिप्पणी से जवाब के आधार पर, यह मुझे अभी भी ले लिया कुछ समय यह पता लगाने की।

ऊपर के लिए अंतिम समाधान है:

var canvas; 

window.onload = function() { 
    canvas = new fabric.Canvas('canvas'); 
    canvas.on("object:selected", function (options, event) { 
     //var object = options.target; //This is the object selected 
     var scope = angular.element(document.getElementById('canvas')).scope(); 
     // You can do anything you want and then call... 
     scope.$apply(); 
    }); 
}; 

AngularJS access scope from outside js function पर जवाब http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

के साथ एक साथ बहुत मददगार था, आप भी स्थिति-जानकारी परिवर्तन जब चलती देखने के लिए चाहते हैं, जोड़ें:

canvas.on("object:moving", function (options, event) { 
    var scope = angular.element(document.getElementById('canvas')).scope(); 
    scope.$apply(); 
});