Fabric上的FabricJS AngularJS事件

Question

我正在研究MEAN Stack应用程序,并在其上使用FabricJS.为了更容易上手,我找到了https://github.com/michaeljcalkins/angular-fabric,我现在大部分时间都在工作.

现在我想做一些事情,如果用户点击画布.只有FabricJS我做过类似的事情:

$scope.canvas.on('mouse:down', function() {
    alert("mouse down");
});

但现在使用Angular Fabric我无法直接访问画布.那是我的控制器:

app.controller('FabricCtrl', ['$scope', 'Fabric', 'FabricConstants', 'Keypress', function($scope, Fabric, FabricConstants, Keypress) {
$scope.fabric = {};
$scope.FabricConstants = FabricConstants;

$scope.$on('canvas:created', function() {
    $scope.fabric = new Fabric({
        JSONExportProperties: FabricConstants.JSONExportProperties,
        textDefaults: FabricConstants.textDefaults,
        shapeDefaults: FabricConstants.shapeDefaults,
        json: {}
    });

  $scope.fabric.setCanvasSize(32, 32);
  $scope.fabric.canvasScale = 10;
  $scope.fabric.setZoom();

  Keypress.onSave(function() {
        $scope.updatePage();
    });
});

但我做不到这样的事情:

$scope.fabric.on('mouse:down', function() {
    alert("mouse down");
});

or

$scope.fabric.canvas.on('mouse:down', function() {
    alert("mouse down");
});

如果我编辑fabric.js并直接在画布上编辑事件,它将起作用.但我无法想象这是正确的方式,也许有人有想法？

Answer 1

找到解决办法了，就这么简单。我将ng-mousedowndiv 绑定在 Fabric HTML 元素上方：

<div class="fabric-container" ng-mousedown="test($event)">
  <canvas fabric="fabric"></canvas>
</div>

在我的控制器中我捕获了坐标：

$scope.test = function(event) {
  var x = event.offsetX / $scope.fabric.canvasScale;
  var y = event.offsetY / $scope.fabric.canvasScale;

  // do something with x, y
};