Fabric.js Textbox paintFirst 属性

在本文中，我们将看到如何使用FabricJS修改画布Textbox的paintFirst属性。画布的Textbox是可移动的，并且可以根据需求进行拉伸。此外，当涉及到初始描边颜色、高度、宽度、填充颜色或描边宽度时，可以自定义Textbox。

为了使其成为可能，我们将使用一个称为FabricJS的JavaScript库。在导入库之后，我们将在body标签中创建一个包含Textbox的canvas块。在此之后，我们将使用FabricJS提供的Canvas和Textbox的实例，并使用paintFirst属性更改Textbox的paintFirst属性值，并将Textbox渲染到Canvas上，如下面的示例所示。

语法：

fabric.Textbox('text', {
   paintFirst: string
});

参数： 该函数接受一个上述提到并以下面描述的参数：

paintFirst： 它指定paintFirst属性的字符串值。此参数的可接受值为fill和stroke。

示例： 此示例使用FabricJS设置画布文本框的paintFirst属性。

<!DOCTYPE html>
<html>
 
<head>
    <!-- Adding the FabricJS library -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Fabric.js | Textbox paintFirst Property
    </h3>
 
    <canvas id="canvas" width="600" height="300"
        style="border:1px solid #000000">
    </canvas>
 
    <script>
        // Initiate a Canvas instance 
        var canvas = new fabric.Canvas("canvas");
 
        // Create a new Textbox instance 
        var text = new fabric.Textbox(
            'A Computer Science Portal', {
            width: 500,
            stroke: 'green',
            paintFirst: 'stroke'
        });
 
        // Render the Textbox in canvas 
        canvas.add(text);
        canvas.centerObject(text);
    </script>
</body>
 
</html>

输出:

Fabric.js Textbox paintFirst 属性