Fabric.js limitDimsByArea()用法及代码示例

limitDimsByArea()方法用于返回最大宽度和高度，该最大宽度和高度可以尊重指定纵横比的总允许面积。长宽比描述图像或屏幕或区域的宽度和高度之间的比率。例如，纵横比为1：1的正方形。第一个数字始终指宽度，第二个数字指高度。在此函数中，长宽比描述为一个数字-在这种情况下，数字是指高度为1时的宽度。

用法:

limitDimsByArea(ar, maximumArea)

参数：此方法接受上面提到和下面描述的两个参数：

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

返回值：此方法通过width(x)和height(y)返回有限的尺寸。

范例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>

输出：

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

范例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>

输出：

{"x":14,"y":3}
{"x":24,"y":4}

相关用法

注：本文由纯净天空筛选整理自Kanchan_Ray大神的英文原创作品 Fabric.js limitDimsByArea() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。