Integration Fabricjs und AngularJS

Question

Ich versuche, eine App zu entwickeln, die eine einfache Grafiken auf dem Bildschirm bearbeitet, fabricjs ist die Leinwand Bibliothek ich benutze, und AngularJS ist der MVW Rahmen ich verwende.

Jetzt funktionieren die Bindungen von DOM zu Fabric ganz gut (ich klicke auf ein div und das entsprechende Objekt auf der Leinwand wird ausgewählt), aber nicht umgekehrt. Wenn ich auf ein Objekt im Canvas-Bereich klicke und es ausgewählt wird, wird das entsprechende DOM nicht aktualisiert. Ich habe here gelesen, dass ich $scope.$apply(); verwenden sollte, aber ich bin nicht sicher, wohin man das setzt.

Wie mache ich Stoff Update $scope Zustand? Klicken Sie auf die Schaltfläche the code here, um Elemente zur Zeichenfläche hinzuzufügen, und beachten Sie, dass wenn Sie auf den Elementnamen auf der rechten Seite klicken, wird es auf der Leinwand ausgewählt, aber wenn Sie es direkt auf der Leinwand auswählen, ist es die Schaltfläche ist nicht high-lit.

Code: http://plnkr.co/edit/lMogPGjJOXx9HLAdiYqB

Answer 1

FabricJS implementiert Ereignisse auf ihren Klassen, so dass man beliebige Zuhörer an sie binden kann. In Ihrem Fall könnten Sie einen Listener an das Ereignis "object:selected" binden, das $scope.$apply() aufrufen würde und jedes Mal ausgelöst würde, wenn ein Objekt auf der Arbeitsfläche ausgewählt wird.

Siehe die Event Inspector Demo und die Observable Class Documentation. Die Klasse Canvas erbt alle diese Methoden, sodass Sie Listener an sie binden können. Sie können sogar das ausgewählte Objekt, wie im Beispiel abrufen:

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

Basierend auf der Antwort von Bernardo Domingues und MeLight Kommentar, es dauerte einige Zeit, immer noch herauszufinden.

Die endgültige Lösung für oben ist:

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(); 
    }); 
}; 

Die Antwort auf AngularJS access scope from outside js function sehr hilfreich war, zusammen mit http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Wenn Sie auch die Positionsinformations Änderung sehen möchten bei einem Umzug, fügen:

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