我正在开发一个 MEAN Stack 应用程序,我在上面使用了 FabricJS。 为了更轻松地工作,我找到了 https://github.com/michaeljcalkins/angular-fabric现在我的大部分东西都可以用了。
现在我想做点什么,如果用户点击 Canvas 。 仅使用 FabricJS 我做了类似的事情:
$scope.canvas.on('mouse:down', function() {
alert("mouse down");
});
但是现在使用 Angular Fabric 我无法直接访问 Canvas 。那是我的 Controller :
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 并直接在 Canvas 上编辑事件,它将起作用。 但我无法想象这是正确的方法,也许有人有想法?
最佳答案
找到了解决办法,就这么简单。我在 fabric HTML 元素上方的 div 上绑定(bind)了 ng-mousedown
:
<div class="fabric-container" ng-mousedown="test($event)">
<canvas fabric="fabric"></canvas>
</div>
在我的 Controller 中,我捕捉到坐标:
$scope.test = function(event) {
var x = event.offsetX / $scope.fabric.canvasScale;
var y = event.offsetY / $scope.fabric.canvasScale;
// do something with x, y
};
关于javascript - Canvas 上的 FabricJS AngularJS 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30574223/