修改错误后获取Fabric.js对象的高度和宽度

时间:2018-10-25 09:06:16

标签: javascript fabricjs

这是我的代码。

<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>

我不明白怎么了。对象位置TOP&LEFT显示正确,但高度和宽度推错了。

请帮助我。

2 个答案:

答案 0 :(得分:1)

选中target.scaleXtarget.scaleY。如果不等于1,则需要将target.widthtarget.height乘以比例

答案 1 :(得分:1)

使用getScaledWidth()getScaledHeight()分别获取对象的变换宽度和高度。