CODEWITHSUNDEEP
fabricjs
Phumlani Shabangu
Phumlani Shabangu

Reputation: 11

How do I fire fabric.js 'object: moving' event when object is being dragged on a canvas?

I am currently developing an application using the fabric.js library where I draw a rectangle object on a fabric.js canvas which has an image background set on it. I can draw the rectangle but then when I click on the rectangle to move it, the 'object:moving' event does not get fired at all and a new rectangle gets drawn while the current selected one is being moved. Is there a way to stop drawing a new rectangle object while moving the current selected one? Below is my JavaScript code.$scope.c is the canvas variable in scope.

$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');

});

Upvotes: 0

Views: 3511

Answers (1)

Observer
Observer

Reputation: 3706

You have a space inside event name 'object: moving', should be:

$scope.c.on('object:moving', function(e) {


    console.log('object is moving');

});

Upvotes: 0

Related Questions