时间戳

首页 > 解决方案 > 如何在调整大小后立即更新添加的 fabric.js 形状？

javascript - 如何在调整大小后立即更新添加的 fabric.js 形状？

问题描述

我正在使用 Fabric.js 处理 Fabric Grid，我想添加添加到画布上的形状的尺寸。新的宽度和高度已定义，但我不仅需要在屏幕上显示尺寸，还需要在调整形状大小时对其进行更新。

下面是 JS 函数，其中newWidth和newHeight被定义：

  function snapToGrid() {
    let checkBox = document.getElementById("myCheck");
    if (checkBox.checked == true) {
      //snap only to the grid
      const gridSize = 50;
      c.on("object:moving", function (options) {
        options.target.set({
          left: Math.round(options.target.left / gridSize) * gridSize,
          top: Math.round(options.target.top / gridSize) * gridSize,
        });
      });

      c.on("object:modified", function (options) {
        var newWidth =
          Math.round(options.target.getWidth() / gridSize) * gridSize;
        var newHeight =
          Math.round(options.target.getHeight() / gridSize) * gridSize;
        options.target.set({
          width: newWidth,
          height: newHeight,
          scaleX: 1,
          scaleY: 1,
        });
      });
    } else {
      c.off("object:modified");
      c.off("object:moving");
    }
  }

我是 Fabric.js 的新手，如果有人帮助我，我将不胜感激。如果我必须分享代码的更多详细信息，请告诉我。

标签： javascriptfabricjs

解决方案

好的，所以我已经回答了我自己的问题，所以如果有人需要，下面的代码将有助于在更改时动态显示形状的宽度和高度。

function onObjectScaled(e){
  var scaledObject = e.target;
  
  var text = document.getElementById("text");
      text.value = 'Width =  '+scaledObject.getWidth() + '   Height = '+scaledObject.getHeight(); 
}

推荐阅读