7

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

现在，从 DOM 到结构的绑定工作得很好（我单击一个 div，画布上的相应对象被选中），但反之则不行。当我单击画布上的对象时，它被选中，相应的 DOM 不会更新。我在这里读过我应该使用$scope.$apply();的，但我不确定该放在哪里。

如何使结构更新$scope状态？

您可以在此处查看代码，单击Add Rect按钮将元素添加到画布，并注意当您单击右侧元素的名称时，它会在画布上被选中，但如果您直接在画布上选择它，则按钮不是高光。

代码： http: //plnkr.co/edit/lMogPGjJOXx9HLAdiYqB

4

2 回答 2

6

FabricJS 在其类上实现事件，因此可以将任意侦听器绑定到它们。在您的情况下，您可以将侦听器绑定到"object:selected"事件，只要在画布上选择对象，该事件就会调用$scope.$apply()并被触发。

请参阅事件检查器演示和Observable 类文档。该类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()
});
于 2013-08-23T21:23:13.713 回答
3

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

来自外部js函数的AngularJS访问范围的答案非常有帮助，以及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();
});
于 2013-11-23T06:35:46.750 回答