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

现在,从DOM到结构的绑定工作正常(我单击一个div,并且选择了画布上的相应对象),但反之则不行。当我单击画布上的对象时,它被选中,相应的DOM不会更新。我已经读过here我应该使用$scope.$apply();,但是我不确定该放在哪里。

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

您可以看到the code here,单击Add Rect按钮将元素添加到画布,并注意,当您单击右侧的元素名称时,它将在画布上被选中,但是如果直接在画布上选择它,则它是按钮光线不足。

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

最佳答案

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

请参见Event Inspector DemoObservable Class DocumentationCanvas类继承了所有这些方法,因此您可以将侦听器绑定到它。您甚至可以检索选定的对象,如示例所示:

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

07-24 09:38
查看更多