在本教程中，我們將學(xué)習(xí)如何使用 FabricJS 禁用 Rectangle 的居中旋轉(zhuǎn)。矩形是 FabricJS 提供的各種形狀之一。為了創(chuàng)建一個(gè)矩形，我們必須創(chuàng)建一個(gè) Fabric.Rect 類的實(shí)例并將其添加到畫布中。默認(rèn)情況下，F(xiàn)abricJS 中的所有對(duì)象都使用其中心作為旋轉(zhuǎn)點(diǎn)。但是，我們可以使用 centeredRotation 屬性來(lái)更改此行為。
語(yǔ)法
new fabric.Rect({ centeredRotation: Boolean }: Object)
登錄后復(fù)制
參數(shù)
選項(xiàng)（可選） – 此參數(shù)是一個(gè)提供額外自定義的對(duì)象到我們的矩形。使用此參數(shù)，可以更改與 centeredRotation 屬性相關(guān)的對(duì)象的顏色、光標(biāo)、描邊寬度等屬性。
選項(xiàng)鍵
centeredRotation – 該屬性接受一個(gè)布爾值，允許我們可以通過(guò)控件來(lái)控制對(duì)象旋轉(zhuǎn)時(shí)是否使用中心點(diǎn)作為其變換原點(diǎn)。它的默認(rèn)值為True。
示例1
FabricJS中矩形旋轉(zhuǎn)的默認(rèn)行為
讓我們看一個(gè)描述矩形對(duì)象默認(rèn)行為的代碼示例。由于 centeredRotation 屬性默認(rèn)設(shè)置為 true，因此矩形對(duì)象使用其中心作為旋轉(zhuǎn)點(diǎn)。
<!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>
登錄后復(fù)制
示例 2
傳遞值為“false”的 centeredRotation 鍵
現(xiàn)在我們已經(jīng)看到了默認(rèn)行為，讓我們看一下代碼示例，以了解為 centeredRotation 屬性分配 False 值時(shí)會(huì)發(fā)生什么。
<!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>
登錄后復(fù)制
以上就是如何使用FabricJS禁用矩形的居中旋轉(zhuǎn)？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
