Fabric.js Text strokeDashOffset 属性

在本文章中，我们将看到如何使用FabricJS在文本画布中添加描边偏移。画布意味着书写的文本是可移动、可旋转、可调整大小、可拉伸的。但在本文章中，我们将添加一个描边偏移。进一步说，文本本身无法像文本框那样编辑。

为了实现这一目标，我们将使用一个名为FabricJS的JavaScript库。在使用CDN引入库之后，在标签中创建一个 canvas 块，该块将包含我们的文本。在此之后，我们将使用FabricJS提供的Canvas和Text初始化实例，并使用 stroke 属性创建描边，并进一步使用 strokeDashOffset 属性添加描边偏移，然后在文本上渲染Canvas，如下面的示例所示。

语法:

fabric.text(
    text: string, 
    strokeDashOffset: number, 
    stroke: string
);

参数: 此函数接受三个参数，如上所述并在下面进行描述：

text: 此参数指定文本。
strokeDashOffset: 此参数定义描边的偏移量。
stroke: 此参数定义描边的颜色。

示例: 此示例使用FabricJS将描边偏移添加到文本画布中，如下所示。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Fabric.js Text strokeDashOffset Property
    </title>
 
    <!-- Loading the FabricJS library -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
 
        <b>
            Add stroke offset to canvas-like
            text with JavaScript
        </b>
 
        <canvas id="canvas" width="600" height="200"
            style="border:1px solid #000000;">
        </canvas>
 
        <script>
 
            // Create a new instance of Canvas
            var canvas = new fabric.Canvas("canvas");
 
            // Create a new Text instance
            var text = new fabric.Text('GeeksforGeeks', {
                strokeDashOffset: 10,
                stroke: 'red'
            });
 
            // Render the text on Canvas
            canvas.add(text);
        </script>
    </center>
</body>
 
</html>

输出：

Fabric.js Text strokeDashOffset 属性