Integracja Fabricjs i angularjs

Question

Próbuję zbudować aplikację, która edytuje proste grafiki na ekranie fabricjs jest biblioteka płótno używam i angularjs stanowi ramy MVW używam.

Teraz wiązania od DOM do tkaniny działają dobrze (klikam element div i odpowiadający obiekt na płótnie zostanie wybrany), ale nie na odwrót. Po kliknięciu obiektu na płótnie i wybraniu odpowiedniego modelu DOM nie jest aktualizowany. Czytałem here, że powinienem używać $scope.$apply();, ale nie jestem pewien, gdzie to umieścić.

Jak dokonać aktualizacji tkaniny $scope stan?

Możesz zobaczyć the code here, kliknij przycisk Add Rect, aby dodać elementy do płótna, i zauważ, że po kliknięciu nazwy elementu po prawej stronie zostanie wybrane na płótnie, ale jeśli wybierzesz go bezpośrednio na płótnie, to przycisk nie jest podświetlony. Kod

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

Answer 1

FabricJS realizuje wydarzenia na swoich zajęciach, więc można związać dowolne słuchaczy do nich. W twoim przypadku możesz powiązać słuchacza ze zdarzeniem "object:selected", które będzie wywoływać $scope.$apply() i będzie uruchamiane za każdym razem, gdy obiekt zostanie wybrany na płótnie.

Zobacz Event Inspector Demo i Observable Class Documentation. Klasa Canvas dziedziczy wszystkie te metody, więc możesz powiązać z nią słuchaczy. Można nawet pobrać wybrany obiekt, jak na przykład:

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

Na podstawie odpowiedzi od Bernardo Domingues i komentarzu MeLight za zajęło mi jeszcze trochę czasu, aby dowiedzieć się.

Ostateczne rozwiązanie powyżej jest:

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

Odpowiedź na AngularJS access scope from outside js function był bardzo pomocny, wraz z http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Jeśli też chcesz zobaczyć zmianę pozycja informacyjna podczas przeprowadzki, dodać:

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