[英]FabricJS AngularJS Events on Canvas
I'm working on a MEAN Stack Application and i use FabricJS on it. 我正在研究MEAN Stack应用程序,并在其上使用FabricJS。 To work easier on it I found https://github.com/michaeljcalkins/angular-fabric and I got most of my stuff working now. 为了更容易上手,我找到了https://github.com/michaeljcalkins/angular-fabric ,我现在大部分时间都在工作。
Now I want to do something, if the user clicks on the canvas. 现在我想做一些事情,如果用户点击画布。 Only with FabricJS I have done something like: 只有FabricJS我做过类似的事情:
$scope.canvas.on('mouse:down', function() {
alert("mouse down");
});
But now with Angular Fabric I have no access to the canvas directly. 但现在使用Angular Fabric我无法直接访问画布。 That is my 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();
});
});
But i can't do something like: 但我做不到这样的事情:
$scope.fabric.on('mouse:down', function() {
alert("mouse down");
});
or
$scope.fabric.canvas.on('mouse:down', function() {
alert("mouse down");
});
If I edit the fabric.js and edit the events directly on canvas, it'll work. 如果我编辑fabric.js并直接在画布上编辑事件,它将起作用。 But I cant imagine this is the right way, maybe someone has an idea? 但我无法想象这是正确的方式,也许有人有想法?
Found a solution, so simple. 找到了解决方案,这么简单。 I bound ng-mousedown
on my div above the fabric HTML element: 我将ng-mousedown
绑定在结构HTML元素上方的div上:
<div class="fabric-container" ng-mousedown="test($event)">
<canvas fabric="fabric"></canvas>
</div>
And in my Controller I catch the coordinates: 在我的控制器中,我抓住了坐标:
$scope.test = function(event) {
var x = event.offsetX / $scope.fabric.canvasScale;
var y = event.offsetY / $scope.fabric.canvasScale;
// do something with x, y
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.