Обновление координат объекта fabricjs при перемещении

Question

Я пытаюсь получить координаты x и y объекта во время его перемещения. Я использую методы getLeft() и getTop() на object:moving. Но эти методы не помогают, если объект вращается.

Затем я попытался получить верхнюю и левую части ограничительной рамки объекта, используя object.getBoundRect().top. Но это не обновляется динамически. Это дает значение ограничивающей рамки в начале операции перемещения. Есть ли способ получить значение ограничивающей рамки при перемещении?

canvas.on('object:moving', function(e) { 
    var scaledObject = e.target; 
    $('#mouse-info').text("X:"+parseInt(scaledObject.getBoundingRect().left)+", Y:"+parseInt(scaledObject.getBoundingRect().top)); 
}); 

Answer 1

Сэмми,

Вы делаете что-то неправильно. getTop и getLeft отлично работает для версии 1.7

Проверьте этот код:

canvas.on('object:moving',function(e){ 
    if (e.target){ 
     console.log(e.target.getTop()); 
     console.log(e.target.getLeft()); 
    } 
}); 

UPDATE:

Если вы хотите, чтобы при вращении вы должны сделать после каждого рендеринга:

canvas.on('after:render', function() { 
    canvas.contextContainer.strokeStyle = '#555'; 
    canvas.forEachObject(function(obj) { 
     var bound = obj.getBoundingRect(); 
     canvas.contextContainer.strokeRect(
     bound.left + 0.5, 
     bound.top + 0.5, 
     bound.width, 
     bound.height 
    ); 
    }); 

    var ao = canvas.getActiveObject(); 
    if (ao) { 
    var bound = ao.getBoundingRect(); 
    console.log(bound.left); 
    console.log(bound.top); 
    } 
    }); 

Этот код будет рисовать для вас ограничивающий прямоугольник для каждой фигуры после каждого рендера. Если вы хотите, чтобы скрыть ограничивающую поле просто удалить этот код:

canvas.contextContainer.strokeStyle = '#555'; 
     canvas.forEachObject(function(obj) { 
      var bound = obj.getBoundingRect(); 
      canvas.contextContainer.strokeRect(
      bound.left + 0.5, 
      bound.top + 0.5, 
      bound.width, 
      bound.height 
     ); 
     }); 

Вот fiddle

Надеюсь, это поможет вам.