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

📅  最后修改于: 2021-10-29 06:04:39             🧑  作者: Mango

在本文中,我们将使用 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 }); 
    
    

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

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

      GeeksforGeeks

              Creating cnavas-type textbox                       
          
    • 输出: