本文介绍了如何在画布上拖动对象时触发fabric.js'对象：移动'事件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我目前正在使用fabric.js库开发一个应用程序，我在fabric.js画布上绘制一个矩形对象，其上设置了图像背景。我可以绘制矩形，但是当我点击矩形移动它时，'object：moving'事件根本不会被触发，并且在移动当前选定的矩形时会绘制一个新的矩形。有没有办法在移动当前选定的矩形对象时停止绘制新的矩形对象？以下是我的JavaScript代码。 $ scope.c是范围内的canvas变量。 $ scope.c.on（' mouse：down'， function （e）{ $ scope .isDown = true ; $ scope.origY = eeoffsetY; $ scope.origX = eeoffsetX; $ scope.rect = new fabric.Rect（{ top：$ scope.origY， left：$ scope.origX，宽度： 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（oe）; 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：数学 .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（' 对象正在移动'）; }）; 解决方案 scope.c是范围内的画布变量。 scope.c.on（' mouse：down'， function （e）{ scope.isDown = 真; 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.c.on('mouse:down', function (e) { $scope.isDown = true; $scope.origY = e.e.offsetY; $scope.origX = e.e.offsetX; $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'); }); 解决方案 scope.c is the canvas variable in scope.scope.c.on('mouse:down', function (e) {scope.isDown = true; 这篇关于如何在画布上拖动对象时触发fabric.js'对象：移动'事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
