【问题标题】:Get height and width of Fabric.js object after modifying wrong修改错误后获取Fabric.js对象的高度和宽度
【发布时间】:2018-10-25 20:15:41
【问题描述】:

这是我的代码。

<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 显示正确,但高度和宽度不正确。

请帮助我。

【问题讨论】:

    标签: javascript fabricjs


    【解决方案1】:

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

    【讨论】:

    • 感谢重播,我更新了我的代码,我得到了正确的值,但我有一个问题,获取值在 PX% 中?
    【解决方案2】:

    检查target.scaleXtarget.scaleY。如果与 1 不同,则需要将 target.widthtarget.height 与比例相乘

    【讨论】:

    • 感谢重播,我更新了我的代码,我得到了正确的值,但我有一个问题,获取值在 PX% 中?
    • 值以像素为单位
    • 我怎样才能获得 % 的价值?
    • (target.getScaledWidth()/canvas.getWidth())*100 -for 宽度 (target.getScaledHeight()/canvas.getHeight())*100 -for 高度
    猜你喜欢
    • 2015-12-31
    • 2012-10-10
    • 1970-01-01
    • 1970-01-01
    • 2013-08-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多