整合Fabricjs和Angularjs

我想建立一個應用程序，它編輯在屏幕上簡單的圖形，fabricjs是畫布庫我使用，並angularjs是MVW框架我用。整合Fabricjs和Angularjs

現在，從DOM到織物的綁定工作得很好（我點擊一個div，並選擇了畫布上的相應對象），但不是相反。當我點擊畫布上的對象時，它被選中，相應的DOM不會更新。我讀here，我應該使用$scope.$apply();，但我不知道該放哪裏。

如何使織物更新$scope狀態？

您可以看到the code here，點擊Add Rect按鈕向畫布添加元素，並注意到當您單擊右側元素的名稱時，它將在畫布上被選中，但如果您直接在畫布上選擇它，則會出現按鈕不高光。

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

來源

2013-08-17 MeLight

你可以張貼小提琴或其他東西給我們看代碼。通常，只要你在angularjs和$ scope的上下文之外的代碼中就使用$ scope.apply。$ apply是通知AngularJS運行綁定和監視器的方式。 – rajasaur

@rajasaur感謝您的回覆。我編輯了這個問題，並在Plunkr上添加了一個例子。 – MeLight

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

來源

2013-08-23 21:23:13

Bernardo這正是我做的:)謝謝你的答覆。唯一的一點是，如果你從範圍之外執行它，你應該像這樣引用範圍：'var scope = angular.element（document.getElementById（'canvas'））。scope（）;' – MeLight

基於從貝爾納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(); 
});

來源

2013-11-23 06:35:46 user3023525

整合Fabricjs和Angularjs

回答

相關問題