Получение х / у смещения в событии перемещения объекта Fabri c

Question

В этом jsFiddle у меня есть прямоугольник Fabri c, который можно перетаскивать. Что мне нужно знать, так это то, насколько прямоугольник был перетащен по горизонтали (X) и по вертикали (Y).

Я фиксирую перемещение, но у меня возникают проблемы с поиском сдвига по осям X и Y. Как распечатать меру X / Y, взятую из события? Обратите внимание, что начальная позиция x = 50, y = 50. если я переместлю прямоугольник, затем остановлюсь, а затем снова перейду, смещение должно быть относительно x = 50, y = 50.

var canvas = new fabric.Canvas('c');

var coords = new fabric.Textbox("not moved yet", {
  fontSize: 16,
  width: 300
});

var text = new fabric.Textbox("Drag me", {
  left: 50,
  top: 50,
  width: 100,
  backgroundColor: 'yellow',
});

canvas.add(coords,text);

canvas.on('object:moving', function(e) {
     console.log(e);
     var x = e.target.transform.ex;
     var y = e.target.transform.ey;
     coords.text = 'Moved x = ' + x + ', y = ' + y;
});

Answer 1

Вы можете отслеживать изменения самостоятельно, просто сохраните начальные координаты в отдельные переменные.

let lastX = text.left
let lastY = text.top

canvas.on('object:moving', function (e) {
  const diffX = e.target.left - lastX
  const diffY = e.target.top - lastY
  coords.text = 'Moved x = ' + diffX + ', y = ' + diffY
})