如何使用 FabricJS 設定文字框控制角的顏色？

在本教程中，我們將學習如何使用 FabricJS 設定文字框控制角的顏色。我們可以自定義、拉伸或移動文字框中的文字。我們還可以使用fontSize、fontFamily、fontStyle、fontWeight等屬性來自定義文字本身。為了建立一個文字框，我們必須建立一個fabric.Textbox類的例項並將其新增到畫布中。cornerColor屬性允許我們在物件處於活動狀態時操作控制角的顏色。

語法

new fabric.Textbox(text: String, { cornerColor: String }: Object)

引數

  • text − 此引數接受一個字串，即我們想要在文字框中顯示的文字字串。

  • options (可選) − 此引數是一個物件，它為我們的文字框提供額外的自定義選項。使用此引數，可以更改與物件相關的許多屬性，其中cornerColor也是一個屬性，例如顏色、游標、筆觸寬度等等。

選項鍵

  • cornerColor：此屬性接受一個字串，允許我們在物件被選中時為控制角分配顏色。預設值為rgb(178,204,255)。

示例 1

將cornerColor作為鍵，顏色名稱作為值傳遞

讓我們來看一個使用cornerColor屬性更改顏色的程式碼示例。在本例中，我們將值“orange”賦值給鍵，從而使控制角顯示為橙色。

<!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 cornerColor as key with a color name as value</h2>
	<p>You can select the textbox to see that the corner colour is orange</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("A little progress each day adds up to big results.", {
			backgroundColor: "#ffe5b4",
			width: 400,
			top: 70,
			left: 110,
			cornerColor: "orange",
		});
		
		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

示例 2

為cornerColor屬性賦值RGBA值

我們可以為鍵賦值RGBA值，而不是將簡單的顏色名稱作為字串值傳遞給鍵。RGBA代表紅色、綠色、藍色和alpha值，其中alpha值表示不透明度。讓我們來看一個如何操作的程式碼示例：

<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>Assigning an RGBA value to the cornerColor property</h2>
	<p>You can select the textbox to see the corner colour</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("A little progress each day adds up to big results.", {
			backgroundColor: "#ffe5b4",
			width: 400,
			top: 70,
			left: 110,
			cornerColor: "rgba(255,69,0, 0.8)",
		});
		
		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

更新於：2022年8月2日

128 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告