Question

我正在尝试构建一个在屏幕上编辑简单图形的应用程序， fabricjs 是我使用的画布库， angularjs 是我使用的MVW框架。 / p>

现在，从DOM到结构的绑定工作得很好（我单击一个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

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

集成Fabricjs和Angularjs

2 个答案: