如何在画布上拖动对象时触发fabric.js'对象：移动'事件？ [英] How do I fire fabric.js 'object: moving' event when object is being dragged on a canvas?

问题描述

我目前正在使用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'，< span class =code-keyword> 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'，< span class =code-keyword> function （o）{
 $ scope.isDown =  false ; 
}）; 
 
 $ scope.c.on（'  object：selected'，< span class =code-keyword> function （e）{
  var  activeObj = $ scope.c.getActiveObject（）; 
 {
  console  .log（activeObj.width）; 
} 
 
}）; 
 
 $ scope.c.on（'  object：moving'，< span class =code-keyword> 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'对象：移动'事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！