画布上的 FabricJS AngularJS 事件

Posted 2023-03-25

【中文标题】画布上的 FabricJS AngularJS 事件

【英文标题】：FabricJS AngularJS Events on Canvas

【发布时间】：2015-08-14 22:55:45

【问题描述】：

我正在开发一个 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 并直接在画布上编辑事件，它会起作用。 但我无法想象这是正确的方法，也许有人有想法？

【参考方案1】：

找到了解决办法，就这么简单。我将 ng-mousedown 绑定到我的 div 上的 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
;