angularjs - 集成 Fabricjs 和 Angularjs

Question

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

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

如何进行结构更新 $scope状态？

可以看the code here , 点击Add Rect按钮将元素添加到 Canvas ，并注意当您单击右侧元素的名称时，它会在 Canvas 上被选中，但如果您直接在 Canvas 上选择它，它的按钮不会高亮。

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

Answer 1

FabricJS 在其类上实现事件，因此可以将任意监听器绑定(bind)到它们。在您的情况下，您可以将监听器绑定(bind)到 "object:selected"事件，将调用 $scope.$apply()并且每当在 Canvas 上选择对象时都会触发。

见Event Inspector Demo和 Observable Class Documentation . Canvas类继承了所有这些方法，因此您可以将监听器绑定(bind)到它。您甚至可以检索选定的对象，如示例中所示:

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