如何在 FabricJS 编辑模式下设置文本对象的边框颜色？

在本教程中，我们将学习如何在使用 FabricJS 的编辑模式下设置文本对象的边框颜色。我们可以通过添加填充颜色、消除边框甚至更改尺寸来自定义文本框对象。同样，可以指示文本是否可编辑。我们还可以使用名为 editingBorderColor 的属性更改文本对象在编辑模式下的边框颜色。

语法

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

参数

  • text − 此参数接受一个字符串，它是我们希望在文本框内显示的文本字符串。

  • options (可选) − 此参数是一个对象，它为我们的文本框提供额外的自定义。使用此参数，可以更改与对象相关的颜色、光标、边框宽度以及许多其他属性，其中editingBorderColor 是一个属性。

选项键

  • editingBorderColor：此属性接受一个字符串，允许我们控制文本对象在编辑模式下的边框颜色。editingBorderColor 属性的默认值为rgba(102,153,255,0.25)。

示例 1

文本框对象的默认外观

让我们看一个代码示例，了解我们的文本框对象在editingBorderColor 属性的默认值下是什么样子。在本例中，我们不会向类传递任何editingBorderColor 键，如下所示：

<!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>Default appearance of a textbox object</h2>
	<p>You can double click on the textbox to enable editing mode</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("Being positive is a sign of intelligence.", {
			left: 110,
			top: 45,
			fill: "black",
			stroke: "green",
			width: 400,
			backgroundColor: "#ffffe7",
		});
		
		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

示例 2

将editingBorderColor 属性作为键传递

在本例中，我们将了解如何为editingBorderColor 属性赋值会更改文本对象在编辑模式下边框的颜色。这里我们使用颜色“红色”进行演示。

<!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 the editingBorderColor property as key</h2>
	<p>You can double click on the text object to see that in editing mode the colour of the border is red</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("Being positive is a sign of intelligence.", {
			left: 110,
			top: 45,
			fill: "black",
			stroke: "green",
			width: 400,
			backgroundColor: "#ffffe7",
			editingBorderColor: "red",
		});
		
		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

更新于： 2022年8月2日

363 次浏览

开启你的 职业生涯

完成课程获得认证

开始学习
广告