Fabric.js 文本 strokeDashArray 属性

在本文中，我们将看到如何使用 FabricJS 给文本画布添加虚线样式。画布意味着文本可以移动、旋转、调整大小和拉伸。但是在本文中，我们将添加一个虚线样式。此外，文本本身无法像文本框一样进行编辑。
为了实现这一目标，我们将使用一个名为 FabricJS 的 JavaScript 库。在使用 CDN 导入库之后，我们将在 body 标签内创建一个 canvas 块，其中将包含我们的文本。然后，我们将初始化由 FabricJS 提供的 Canvas 和 Text 实例，并使用 stroke 属性创建一个边框，进一步使用 strokeDashArray 属性添加虚线样式，并渲染 Canvas 于 Text 上方，示例代码如下所示。

语法:

fabric.text(text: string, strokeDashArray: Array, stroke);

参数: 此函数接受如上所述的三个参数，并具体描述如下:

text: 此参数指定文本。
strokeDashArray: 此参数定义描边的模式。
stroke: 此参数定义描边颜色。

示例: 此示例使用FabricJS将虚线描边模式添加到文本画布，如下所示。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Fabric.js Text strokeDashArray 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 dash pattern 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', {
                strokeDashArray: [5],
                stroke: 'red'
            });
 
            // Render the text on Canvas
            canvas.add(text);
        </script>
    </center>
</body>
 
</html>

输出：

Fabric.js 文本 strokeDashArray 属性