我目前正在使用fabric.js库开发一个应用程序,我在fabric.js画布上绘制一个矩形对象,其上设置了图像背景。我可以绘制矩形但是当我点击矩形移动它时,对象:移动'事件根本不会被触发,并且在移动当前选定的一个矩形时会绘制一个新的矩形。有没有办法在移动当前选定的矩形对象时停止绘制新的矩形对象?下面是我的JavaScript代码。$ scope.c是范围内的canvas变量。
$scope.rect = new fabric.Rect({
top: $scope.origY,
left: $scope.origX,
width: 0,
height: 0,
fill: 'gold',
stroke: 'red',
strokewidth: 4.5,
opacity: 0.5,
name: 'UserArea_'
});
$scope.c.add($scope.rect);
});
$scope.c.on('mouse:move', function(o) {
if (!$scope.isDown) {
return
};
var pointer = $scope.c.getPointer(o.e);
if ($scope.origX > pointer.x) {
$scope.rect.set({
left: Math.abs(pointer.x)
});
}
if ($scope.origY > pointer.y) {
$scope.rect.set({
top: Math.abs(pointer.y)
});
}
$scope.rect.set({
width: Math.abs($scope.origX - pointer.x)
});
$scope.rect.set({
height: Math.abs($scope.origY - pointer.y)
});
$scope.rect.setCoords();
});
$scope.c.on('mouse:up', function(o) {
$scope.isDown = false;
});
$scope.c.on('object:selected', function(e) {
var activeObj = $scope.c.getActiveObject(); {
console.log(activeObj.width);
}
});
$scope.c.on('object: moving', function(e) {
console.log('object is moving');
});
答案 0 :(得分:0)
事件名称'object:moving'中有一个空格,应为:
$scope.c.on('object:moving', function(e) {
console.log('object is moving');
});