Wydarzenia FabricJS AngularJS na płótnie

Question

Pracuję nad aplikacją stosu MEAN i używam na niej FabricJS. Aby ułatwić sobie pracę, znalazłem https://github.com/michaeljcalkins/angular-fabric i większość moich rzeczy pracuję teraz.

Teraz chcę coś zrobić, jeśli użytkownik kliknie na kanwie. Tylko z FabricJS Zrobiłem coś takiego:

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

Ale teraz z Kątowymi Fabric nie mam dostępu do płótna bezpośrednio. To jest mój kontroler:

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

ale nie mogę zrobić coś takiego:

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

or 

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

Gdybym edytować fabric.js i edytować wydarzenia bezpośrednio na płótnie, że to zadziała. Ale nie mogę sobie wyobrazić, że to jest właściwa droga, może ktoś ma pomysł?

Answer 1

Znaleziono rozwiązanie, takie proste. I związany ng-mousedown na moim div powyżej elementu HTML Tkanina:

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

I w moim kontrolera złapię współrzędne:

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

    // do something with x, y 
};