移動中にfabricjsオブジェクトの座標を更新する

Question

移動中にオブジェクトのx座標とy座標を取得しようとしています。私はobject:movingにgetLeft()とgetTop()の方法を使用します。しかし、これらのメソッドは、オブジェクトが回転している場合は役に立ちません。

次に、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

サミー、

あなたは何か間違ったことをやっています。あなたは、各レンダリング後に行う必要があり、回転して持つようにしたい場合は

：UPDATE

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

：getTopとgetLeftは、バージョン1.7

チェックのために、このコードは正常に動作し

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

で、それはあなたを助けるでしょう。