如何使用 Fabric.js 创建一个简单的可编辑画布文本框？

在本文中，我们将使用 Fabric.js 创建一个画布文本框。画布意味着在 Textbox 中写入的文本是可移动的，并且可以根据需要进行拉伸。此外，文本本身也可以编辑为其他任何内容，因为它是一个文本框。

创建结构：为了实现这一点，我们将使用一个名为FabricJS的 JavaScript 库并创建一个基本的画布结构。

• 包括 FabricJS 库：使用 CDN 导入库

• 创建画布结构的 HTML 代码：我们将在包含文本框的 body 标签中创建一个画布块。之后，我们将初始化 FabricJS 提供的 Canvas 和 Textbox 的实例，并在 Textbox 上渲染 Canvas，如下例所示。

  
  
    
  
    
  
    
  
      
          
  GeeksforGeeks
          Creating cnavas-type textbox
          
          
      
    
  
                      
  

设计结构：在本节中，我们将设计预先创建的结构，并添加使用 JavaScript 在画布周围移动画布文本的功能。

• 用于设计结构的 CSS 代码：

• JavaScript 代码：在本节中，我们可以将文本放置在画布内。

  句法：

  fabric.Textbox('Sample Text', { width: 100 }); 

    
      // Create a new instace of Canvas
      var canvas = new fabric.Canvas("canvas");
    
      // Create a new Textbox instance
      var text = new fabric.Textbox('A Computer Science Portal', 
      {
          width: 450
      });
        
      // Render the Textbox on Canvas
      canvas.add(text);

  最终解决方案：在本节中，我们将结合上述所有将创建画布类型文本框的部分。

  • 程序：我们可以使用 FabricJS 创建简单的可编辑类似画布的文本框，如下所示：

       
    
        
        
        
        
            body {
                text-align: center;
            }
            h1 {
                color: green;
            }
            canvas {
                border: 2px solid green;
            }
        
    
       
    
        
            GeeksforGeeks
            Creating cnavas-type textbox
            
            
        
        
      
            // Create a new instace of Canvas
            var canvas = new fabric.Canvas("canvas");
       
            // Create a new Textbox instance
            var text = new fabric.Textbox('A Computer Science Portal', 
            {
                width: 450
            });
            
            // Render the Textbox on Canvas
            canvas.add(text);
        

  • 输出：