在本教程中，我們將學習如何使用 FabricJS 禁用 Rectangle 的居中旋轉。矩形是 FabricJS 提供的各種形狀之一。為了創建一個矩形，我們必須創建一個 Fabric.Rect 類的實例并將其添加到畫布中。默認情況下，FabricJS 中的所有對象都使用其中心作為旋轉點。但是，我們可以使用 centeredRotation 屬性來更改此行為。
語法
new fabric.Rect({ centeredRotation: Boolean }: Object)
登錄后復制
參數
選項（可選） – 此參數是一個提供額外自定義的對象到我們的矩形。使用此參數，可以更改與 centeredRotation 屬性相關的對象的顏色、光標、描邊寬度等屬性。
選項鍵
centeredRotation – 該屬性接受一個布爾值，允許我們可以通過控件來控制對象旋轉時是否使用中心點作為其變換原點。它的默認值為True。
示例1
FabricJS中矩形旋轉的默認行為
讓我們看一個描述矩形對象默認行為的代碼示例。由于 centeredRotation 屬性默認設置為 true，因此矩形對象使用其中心作為旋轉點。
<!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 behaviour of rotation of Rectangle in FabricJS</h2>
<p>Click on the rectangle and rotate it. You will notice that the object rotates around its center, which is the default behaviour.</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: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
登錄后復制
示例 2
傳遞值為“false”的 centeredRotation 鍵
現在我們已經看到了默認行為，讓我們看一下代碼示例，以了解為 centeredRotation 屬性分配 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>Passing centeredRotation key with the value as “false”</h2>
<p>Click on the rectangle and rotate it to see the changed center of rotation</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: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
centeredRotation: false,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
登錄后復制
以上就是如何使用FabricJS禁用矩形的居中旋轉？的詳細內容，更多請關注www.92cms.cn其它相關文章！
