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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。