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