FabricJS AngularJS Events on Canvas

Question

Sto lavorando a un'applicazione Stack MEAN e uso FabricJS su di esso. Per lavorare più facilmente su di esso ho trovato https://github.com/michaeljcalkins/angular-fabric e ho ottenuto la maggior parte delle mie cose lavorando ora.

Ora voglio fare qualcosa, se l'utente fa clic sulla tela. qualcosa solo con FabricJS ho fatto come:

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

Ma ora con tessuto angolare non ho accesso alla tela direttamente. Questo è il mio 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(); 
    }); 
}); 

ma non posso fare qualcosa di simile:

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

or 

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

Se modifico le fabric.js e modificare gli eventi direttamente su tela, funzionerà. Ma non posso immaginare che questo sia il modo giusto, forse qualcuno ha un'idea?

Answer 1

Trovato una soluzione, così semplice. Ho legato ng-mousedown sul mio div sopra l'elemento tessuto HTML:

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

E nel mio controller prendo le coordinate:

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

    // do something with x, y 
};