資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 Fabric.js 移除文字畫布的控制元件？
Fabric.js 是一個強大的 JavaScript 工具，它使用 HTML5 canvas 簡化了構建具有互動式和動態圖形的應用程式的過程。它提供了許多有用的功能，包括能夠向畫布上的物件新增控制元件，例如調整大小和旋轉控制代碼。但是，有時您可能希望從某些物件（例如文字）中移除這些控制元件，以限制使用者可以執行的操作。在本文中，我們將向您展示如何使用 Fabric.js 從文字畫布中移除控制元件，並使用您可以跟隨的簡單示例。
如何移除文字的控制元件？
要使用 Fabric.js 從文字畫布中移除控制元件，您可以使用 `hasControls` 屬性，該屬性允許您啟用或停用單個物件的控制元件。當您將 `hasControls` 設定為 `false` 時，它將移除與特定物件關聯的控制元件，從而阻止使用者與其進行互動。
語法
new fabric.Text(text, options);
此函式接受兩個引數，如下所述：
fabric.Text 是 Fabric.js 中建立一個文字物件的函式。
`text` 引數是一個字串，表示您想要顯示的內容。
`options` 引數是一個物件，允許您設定文字物件的附加屬性，例如其位置（left 和 top）和字型大小（fontSize）等。
示例
在下面的程式碼中，HTML 文件透過新增帶有庫源 URL 的指令碼標籤來包含 Fabric.js 庫。
在指令碼部分，Fabric.js 畫布透過建立 fabric.Canvas 類的新的例項並將其與使用其 ID 的畫布元素關聯來初始化。
然後，使用 fabric.Text 建構函式建立一個文字物件，指定文字內容為“Hello, World！”，並設定其位置（left 和 top）和字型大小（fontSize）等屬性。
將文字物件的 `hasControls` 屬性設定為 `false` 以停用該特定物件的調整大小或旋轉等控制元件。
最後，使用 `canvas.add()` 方法將文字物件新增到畫布中，該方法將其渲染到畫布上。
<html>
<head>
<!-- Loading the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<h2> Removing controls of a text canvas using Fabric.js</h2>
<canvas id="canvas" width="500" height="300" style="border:1px solid #000000;">
</canvas>
<script>
// Initialize Fabric.js canvas
var canvas = new fabric.Canvas("canvas");
// Create a text object
var text = new fabric.Text('Hello, World!', {
left: 100,
top: 100,
fontSize: 24,
hasControls: false, // Disable controls for the text object
});
// Add the text object to the canvas
canvas.add(text);
</script>
</body>
</html>
示例 2
在下面的示例中，HTML 文件包含一個將顯示圖形輸出的畫布元素。
在 body 部分中，定義了一個 ID 為“canvas”的畫布元素，指定其寬度和高度。
在指令碼部分，使用 fabric.Text 建構函式建立了一個文字物件。它顯示文字“Welcome！”，並位於畫布上的座標 (200, 200) 處。
為文字物件設定了附加屬性，例如字型大小 36、粗體字重和藍色填充顏色。
使用 canvas.add 方法將文字物件新增到畫布中，使其在畫布上可見。
<html>
<head>
<!-- Loading the FabricJS library -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"> </canvas>
<script>
// Initialize Fabric.js canvas
var canvas = new fabric.Canvas("canvas");
// Create a text object
var text = new fabric.Text('Welcome!', {
left: 200,
top: 200,
fontSize: 36,
fontWeight: 'bold',
fill: 'blue',
hasControls: false,
});
// Add the text object to the canvas
canvas.add(text);
</script>
</body>
</html>
結論
在本教程中，我們學習瞭如何使用兩個示例使用 fabricjs 移除文字的控制元件，我們還學習了 fabric js 及其如何在畫布物件上提供調整大小和旋轉控制元件；有時，您需要限制使用者互動。使用 Fabric.js，您可以輕鬆地使用 `hasControls` 屬性從特定物件（例如文字）中移除控制元件。將 `hasControls` 設定為 `false` 將停用該物件的控制元件，從而阻止使用者互動。本文演示了使用 Fabric.js 從文字畫布中移除控制元件的語法並提供了示例。
414 次瀏覽
