資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 FabricJS 設定橢圓的最小允許縮放值？
在本教程中，我們將學習如何使用 FabricJS 設定橢圓的最小允許縮放比例。橢圓是 FabricJS 提供的各種形狀之一。為了建立橢圓，我們將建立 fabric.Ellipse 類的例項並將其新增到畫布中。我們可以透過新增填充顏色、消除邊框甚至更改其尺寸來自定義橢圓物件。類似地，我們還可以使用 minScaleLimit 屬性設定其最小允許縮放比例。
語法
new fabric.Ellipse({ minScaleLimit : Number }: Object)引數
options (可選) - 此引數是一個 物件，它為我們的橢圓提供了額外的自定義選項。使用此引數，可以更改與物件的許多屬性相關聯的顏色、游標、邊框寬度以及其他許多屬性，其中 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>How to set the minimum allowed scale value of Ellipse using FabricJS?</h2>
<p>Here you can select the object and scale it up freely to any extent, as we have not used the <b>minScaleLimit</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#ff1493",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
將 minScaleLimit 屬性作為鍵並帶有自定義值傳遞
在本例中，我們將看到將值分配給 minScaleLimit 屬性如何更改畫布中橢圓物件的最小允許縮放值。這裡我們使用了 0.8 作為值，這意味著我們將無法將物件縮小到小於 64px 的水平半徑和 40px 的垂直半徑，這是透過 **半徑 * 限制** 計算出來的 (0.8 * 80 = 64px，0.8 * 50 = 40px)。
<!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>How to set the minimum allowed scale value of Ellipse using FabricJS?</h2>
<p>Select the object and try to scale it down. Here we have set the <b>minScaleLimit</b> to 0.8 beyond which the ellipse cannot be reduced further in size. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#ff1493",
minScaleLimit: 0.8,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新於: 2022年5月25日
96 次瀏覽
廣告