FabricJS AngularJS Tuval Üzerine Etkinlikler

Question

Bir MEAN Stack Uygulaması üzerinde çalışıyorum ve üzerinde FabricJS kullanıyorum. Daha kolay çalışmak için https://github.com/michaeljcalkins/angular-fabric'u buldum ve işlerin çoğunu şimdi çalışıyorum.

Artık kullanıcı, tuvali tıklatırsa bir şeyler yapmak istiyorum. Sadece FabricJS ile yaptım gibi bir şey:

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

Ama şimdi Eğik Kumaş ile doğrudan tuvale hiçbir erişimi vardır. Bu benim denetleyicisi geçerli:

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

Ama böyle bir şey yapamaz: Ben fabric.js düzenlemek ve tuval üzerine doğrudan olayları düzenlerseniz

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

or 

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

, bu ödeme şekli. Ama bunun doğru yol olduğunu düşünemiyorum, belki birinin fikri vardır?

Answer 1

Bir çözüm buldum, çok basit.

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

Ve Denetleyici içinde

Ben koordinatları yakalamak:

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

    // do something with x, y 
}; 

Ben kumaş HTML öğesi üzerinde benim div ng-mousedown bağlı