如何使用 FabricJS 停用 Textbox 的居中縮放？
- PHPz轉載
- 2023-08-23 18:01:021283瀏覽
在本教學中，我們將學習如何使用 FabricJS 停用 Textbox 的居中縮放。我們可以自訂、拉伸或移動文字方塊中寫入的文字。為了創建文字框，我們必須建立 Fabric.Textbox 類別的實例並將其新增至畫布。透過控制項進行縮放時，為 centeredScaling 屬性指派一個真值，使用中心作為物件的變換原點。
語法
new fabric.Textbox(text: String, { centeredScaling: Boolean }: Object)參數
#text − 此參數接受一個String，它就是我們要使用的文字字串。想要在我們的文字方塊中顯示。
選項（可選） - 此參數是一個物件，它提供了額外的自訂我們的文字方塊。使用此參數，可以變更與 centeredScaling 屬性相關的物件的顏色、遊標、描邊寬度等屬性。
#centeredScaling - 此屬性接受布林值並允許我們控制物件是否應該是否使用其中心作為變換原點。
Options Keys
範例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>Passing centeredScaling as key and assigning a "true" value to it</h2>
<p>Try scaling the textbox to see that centered scaling has been enabled</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 textbox object
var textbox = new fabric.Textbox("Success is the child of audacity.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
centeredScaling: true,
});
// Add it to the canvas
canvas.add(textbox);
</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 centeredScaling property</h2>
<p>Try scaling the textbox to see that centered scaling has been disabled</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 textbox object
var textbox = new fabric.Textbox("Success is the child of audacity.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
centeredScaling: false,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>###以上是如何使用 FabricJS 停用 Textbox 的居中縮放？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除