資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 FabricJS 停用圓形的居中縮放？
在本教程中，我們將學習如何使用 FabricJS 停用圓形的居中縮放。圓形是 FabricJS 提供的各種形狀之一。為了建立圓形，我們必須建立一個 `fabric.Circle` 類的例項並將其新增到畫布中。當透過控制元件進行縮放時，為 `centeredScaling` 屬性賦值 `true`，會使用中心作為物件的變換原點。
語法
new fabric.Circle({ centeredScaling: Boolean }: Object)引數
options (可選) − 此引數是一個物件，它為我們的圓形提供了額外的自定義功能。使用此引數，可以更改與物件相關的許多屬性，例如顏色、游標、筆觸寬度等等，其中 `centeredScaling` 就是一個屬性。
選項鍵
centeredScaling − 此屬性接受一個 **布林值**。當此屬性為 **True** 時，物件使用其中心作為變換原點。
示例 1
將 `centeredScaling` 作為鍵併為其賦值 "true"
讓我們來看一段程式碼，瞭解當啟用 `centeredScaling` 屬性時圓形物件的行為。當我們放大物件時，變換原點是圓形的中心。
<!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>Disabling the centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is set to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: true
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
停用 centeredScaling 屬性
我們可以透過為 `centeredScaling` 屬性賦值 `false` 來停用它。這將強制圓形不再使用圓心作為變換中心。以下是一段演示程式碼。
<!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>Disabling the centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: false
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新於：2022年5月25日
瀏覽量：183
廣告