Fabric.js limitDimsByArea()方法

limitDimsByArea()方法 用于返回可以符合指定纵横比总允许区域的最大宽度和高度。纵横比描述了图像、屏幕或区域宽度与高度之间的比例关系。例如，1:1纵横比是一个正方形。第一个数字始终表示宽度，第二个数字表示高度。在这个方法中，纵横比被描述为一个单独的数字 – 在这种情况下，该数字表示高度为1时的宽度。

语法：

limitDimsByArea(ar, maximumArea)

参数: 此方法接受两个参数，如上述所述，具体描述如下：

ar: 此参数保存指定的宽高比。
maximumArea: 此参数保存允许的区域。

返回值: 此方法返回宽度(x)和高度(y)的限制尺寸。

示例1：

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

输出：

{"x":2,"y":2}
{"x":6,"y":3}
{"x":15,"y":3}
{"x":70,"y":7}

示例2:

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

输出：