在本教程中，我們將學習如何使用 FabricJS 禁用 Circle 的居中縮放。圓形是 FabricJS 提供的各種形狀之一。為了創建一個圓圈，我們必須創建一個 Fabric.Circle 類的實例并將其添加到畫布中。通過控件進行縮放時，為 centeredScaling 屬性分配一個真值，使用中心作為對象的變換原點。
語法
new fabric.Circle({ centeredScaling: Boolean }: Object)
登錄后復制
參數
選項（可選） – 此參數是一個提供額外自定義的對象到我們的圈子。使用此參數，可以更改與centeredScaling屬性相關的對象的顏色、光標、描邊寬度等屬性
選項鍵
centeredScaling – 此屬性接受布爾值價值。當此屬性為True時，對象使用中心作為變換原點。
示例 1
將centeredScaling作為鍵傳遞并為其分配一個“true”值
讓我們看一段代碼，看看圓形對象在centeredScaling時的行為
em> 屬性已啟用。當我們放大對象時，變換的原點是圓心。
<!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 屬性
我們可以通過為其指定一個 false 值來禁用 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 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>
登錄后復制
以上就是如何使用 FabricJS 禁用 Circle 的居中縮放？的詳細內容，更多請關注www.92cms.cn其它相關文章！
