資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 FabricJS 設定矩形的最小允許縮放值？
在本教程中，我們將學習如何使用 FabricJS 設定矩形的最小允許縮放值。矩形是 FabricJS 提供的各種形狀之一。為了建立一個矩形，我們將必須建立一個fabric.Rect類的例項並將其新增到畫布中。
我們可以透過新增填充顏色、消除其邊框甚至更改其尺寸來自定義矩形物件。同樣，我們也可以使用minScaleLimit屬性設定其最小允許縮放值。
語法
new fabric.Rect({ minScaleLimit : Number }: Object)引數
選項（可選） - 此引數是一個物件，它為我們的矩形提供額外的自定義設定。使用此引數，可以更改與物件的許多屬性相關的屬性，其中minScaleLimit就是一個屬性，例如顏色、游標、邊框寬度等。
選項鍵
minScaleLimit - 此屬性允許我們控制矩形的最小允許縮放值。它接受一個數字作為值。
示例 1
矩形物件的預設外觀
讓我們來看一個程式碼示例，看看當不使用minScaleLimit屬性時，我們的矩形物件是什麼樣的。在這種情況下，我們將能夠自由縮放我們的物件，因為沒有設定最小限制。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance of the rectangle object</h2>
<p>You can try scaling the rectangle to see that there is no minimum allowed scale value.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 155,
top: 90,
width: 170,
height: 70,
fill: "#6f2da8",
padding: 9,
stroke: "#b666d2",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>示例 2
將minScaleLimit屬性作為鍵傳遞，並帶有自定義值
在這個例子中，我們將看到為minScaleLimit屬性賦值如何改變畫布中矩形物件的最小允許縮放值。這裡我們使用了0.8作為值，這意味著我們將無法將我們的物件縮放小於136畫素的寬度和56畫素的高度，這是透過**半徑 * 限制**計算得出的（0.8 * 170 = 136畫素，0.8 * 70 = 56畫素）。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing the minScaleLimit property as key with a custom value</h2>
<p>You can try scaling the rectangle and observer that it isn't possible to scale down the rectangle lesser than a width of 136px and height of 56px.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 155,
top: 90,
width: 170,
height: 70,
fill: "#6f2da8",
padding: 9,
stroke: "#b666d2",
strokeWidth: 5,
minScaleLimit: 0.8,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
更新於：2022年6月30日
107 次瀏覽
廣告