CODEWITHSUNDEEP
javascriptfabricjs
Chirag Patel
Chirag Patel

Reputation: 177

Get height and width of Fabric.js object after modifying wrong

Here is my code.

<canvas id="c" width="240" height="300" style="border:1px solid #000000"></canvas>

<script>
    var canvas = new fabric.Canvas('c');
     canvas.backgroundColor = 'yellow';


     canvas.renderAll();

     fabric.Image.fromURL(<?php echo '"' . $url . '"'; ?>, function(myImg) {
      var img1 = myImg.set({ left: 0, top: 0 ,width:150,height:150});
      canvas.add(img1); 
     });

     function objectMovedListener(ev) {
      let target = ev.target;
      console.log('left', target.left, 'top', target.top, 'width', target.width * target.scaleX, 'height', target.height * target.scaleY);
     }

    canvas.on('object:modified', objectMovedListener);
</script>

I don't understand what's going wrong. object position TOP & LEFT is showing correct but height & width is shoving wrong.

Please help me.

Upvotes: 0

Views: 3010

Answers (2)

Durga
Durga

Reputation: 15604

Use getScaledWidth() and getScaledHeight() to get transformed width and height of an object respectively.

Upvotes: 5

Marius Turcu
Marius Turcu

Reputation: 1511

Check target.scaleX and target.scaleY. If are different than 1 you need to multiply the target.width and target.height with scale

Upvotes: 0

Related Questions