Fabric.js 画布选择属性

在本文中，我们将了解如何使用selection属性在Fabric.js 中启用或禁用画布中对象的选择。 Fabric.js 中的画布用作 HTML 提供的本机画布对象的包装器。它提供对底层画布的高级访问，允许它拥有一个对象模型，允许解析 SVG 文件，并允许以直观的方式与画布进行交互。

方法：为了使它成为可能，我们将使用一个名为Fabric.js的 JavaScript 库。导入库后，我们将在 body 标签中创建 canvas 块。之后，我们将初始化 Fabric.js提供的画布对象的实例，并使用 selection属性设置画布所需的选择模式。

句法：

fabric.Canvas(canvasElement, {
    selection: Boolean
});

参数：此属性接受如上所述和下文所述的单个参数。

• selection：它是一个布尔值，指定是否应在画布上启用对象选择。

示例：下面的示例说明了在 JavaScript 中使用 Fabric.js 画布选择属性。

HTML

  

    
    
    

  

    
        
            GeeksforGeeks
        
  
        
            Fabric.js | Canvas selection Property
        
    
  
    Selection Disabled
    
    
  
    Selection Enabled
    
    
  
    
  
        let circle = new fabric.Circle({
            radius: 30,
        });
  
        let circle2 = new fabric.Circle({
            radius: 30,
        });
  
        // Initiate a Canvas instance 
        let canvas = new fabric.Canvas("canvas", {
  
            // Disable selection
            // in this Canvas
            selection: false
        });
  
        // Initiate a Canvas instance 
        let canvas2 = new fabric.Canvas("canvas2", {
              
            // Enable selection
            // in this Canvas
            selection: true
        });
  
        canvas.add(circle);
        canvas.centerObject(circle);
        canvas2.add(circle2);
        canvas2.centerObject(circle2);
    

  

输出：