El método limitDimsByArea() se utiliza para devolver el ancho y el alto máximos que pueden respetar el área total permitida para relaciones de aspecto específicas. La relación de aspecto describe la relación entre el ancho y el alto de una imagen, pantalla o área. Por ejemplo, una relación de aspecto de 1:1 es un cuadrado. El primer número siempre se refiere al ancho, y el segundo se refiere a la altura. En esta función, la relación de aspecto se describe como un solo número; en este caso, el número se refiere al ancho donde la altura es 1.
Sintaxis:
limitDimsByArea(ar, maximumArea)
Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- ar: este parámetro contiene la relación de aspecto especificada.
- MaximumArea: este parámetro contiene el área permitida.
Valor devuelto: este método devuelve las dimensiones limitadas por ancho (x) y alto (y).
Ejemplo 1:
Javascript
<!DOCTYPE html> <html> <head> <!-- Adding the FabricJS library --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> </script> </head> <body> <script type="text/javascript"> // Calling limitDimsByArea() function over // the specified aspect ratios and areas console.log(fabric.util.limitDimsByArea(1, 5)); console.log(fabric.util.limitDimsByArea(2, 20)); console.log(fabric.util.limitDimsByArea(5, 45)); console.log(fabric.util.limitDimsByArea(10, 500)); </script> </body> </html>
Producción:
{"x":2,"y":2} {"x":6,"y":3} {"x":15,"y":3} {"x":70,"y":7}
Ejemplo 2:
Javascript
<!DOCTYPE html> <html> <head> <!-- Adding the FabricJS library --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> </script> </head> <body> <script type="text/javascript"> // Specifying some aspect ratios and areas var ar1 = 4; var ar2 = 6; var area1 = 50; var area2 = 100; // Calling limitDimsByArea() function over // the above specified aspect ratios and areas console.log(fabric.util.limitDimsByArea(ar1, area1)); console.log(fabric.util.limitDimsByArea(ar2, area2)); </script> </body> </html>
Producción:
{"x":14,"y":3} {"x":24,"y":4}
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA