• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

164
Vistas
How to update an added fabric.js shape as soon as it is resized?

I am working on a Fabric Grid using Fabric.js and I want to add the dimensions of the shape that is added on the canvas. The new Width and Height is defined but I will need to not only show the dimensions on the screen, but also get it updated when I resize the shape.

Below is the JS function, where newWidth and newHeight are defined:

  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");
    }
  }

I am new to Fabric.js and would appreciate if someone helped me on this. Please let me know if I'' have to share more details of the code.

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Okay so I've answered my own question, so if anyone needs it, here's the below code that would help to dynamically show your shape's width and height while altered.

function onObjectScaled(e){
  var scaledObject = e.target;
  
  var text = document.getElementById("text");
      text.value = 'Width =  '+scaledObject.getWidth() + '   Height = '+scaledObject.getHeight(); 
}
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda