集成 Fabricjs 和 Angularjs

Posted 2023-03-25

【中文标题】集成 Fabricjs 和 Angularjs

【英文标题】：Integrating Fabricjs and Angularjs

【发布时间】：2013-08-19 22:53:02

【问题描述】：

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

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

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

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

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

【问题讨论】：

你能发一个小提琴之类的东西给我们看看代码吗？通常，只要您处于 angularjs 上下文之外的代码中，您就会使用 $scope.apply，而 $scope.$apply 是通知 AngularJS 运行绑定和观察者的方式。

@rajasaur 感谢您的回复。我编辑了问题并在 Plunkr 上添加了一个示例。

【参考方案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()
);

【讨论】：

Bernardo 这正是我所做的 :) 感谢您的回复。唯一的问题是，如果您从范围之外执行此操作，则应该像这样引用范围：var scope = angular.element(document.getElementById('canvas')).scope();

【参考方案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();
);