如何使用 FabricJS 创建带有文本框的画布?
fabricjshtml5 canvasjavascript
在本教程中，我们将学习如何使用 FabricJS 创建带有文本框对象的画布。我们可以自定义、拉伸或移动文本框中写入的文本。我们还可以使用 fontSize、fontFamily、fontStyle、fontWeight 等属性自定义文本本身。为了创建文本框，我们必须创建 fabric.Textbox 类的实例并将其添加到画布。
语法
new fabric.Textbox( text: String, options: Object)
参数
text − 此参数接受 String，这是我们想要在文本框内显示的文本字符串。
options(可选)− 此参数是一个 Object，它为我们的文本框提供额外的自定义。使用此参数可以更改与文本框对象相关的颜色、光标、笔触宽度和许多其他属性。
示例 1
创建 fabric.Textbox() 的实例并将其添加到画布
让我们看一个代码示例，了解如何将文本框添加到画布。这里我们创建了一个宽度为 210 像素、字体大小为 20 像素的对象。此外，我们使用了字体系列"Helvetica"，这是一种无衬线字体。
<!DOCTYPE html>
<html>
<head>
<!-- 添加 Fabric JS 库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>创建 fabric.Textbox() 实例并将其添加到画布</h2>
<p>您可以看到文本框已添加到画布中</p>
<canvas id="canvas"></canvas>
<script>
// 启动一个canvas实例
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// 初始化一个 textbox 文本框对象
var textbox = new fabric.Textbox("He who is brave is free.", {
top: 70,
left: 80,
width: 400,
fontSize: 20,
padding: 10,
fontFamily: "Helvetica",
});
// 将其添加到画布
canvas.add(textbox);
</script>
</body>
</html>
示例 2
使用 set 方法操作 Textbox 对象
在此示例中，我们使用 set 方法将属性分配给文本框，该方法是值的设置器。可以使用此方法改变与笔触、strokeWidth、角度、缩放、旋转等相关的任何属性。
<!DOCTYPE html>
<html>
<head>
<!-- 添加 Fabric JS 库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>使用 set 方法操作 Textbox 对象</h2>
<p>您可以选择文本框以将其在画布上移动</p>
<canvas id="canvas"></canvas>
<script>
// 启动一个canvas实例
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// 初始化一个 textbox 文本框对象
var textbox = new fabric.Textbox("He who is brave is free.");
// 设置属性
textbox.set("top", 70);
textbox.set("left", 65);
textbox.set("fill", "#ff69b4");
textbox.set("fontWeight", "bold");
textbox.set("backgroundColor", "black");
textbox.set("width", 400);
// 将其添加到画布
canvas.add(textbox);
</script>
</body>
</html>
