如何识别所选对象的类型？

Posted 2023-03-05

【中文标题】如何识别所选对象的类型？

【英文标题】：How to identify the type of a selected object?

【发布时间】：2013-09-24 11:11:35

【问题描述】：

我正在使用 Fabric.js 在画布上放置文本、图像和形状。我为所有三个制作了三个不同的编辑面板。当用户选择文本时，我想显示文本面板。像图像和形状一样明智。

【问题讨论】：

请发布一些您尝试过的代码

我尝试手动设置和获取 canvas.getActiveObject().get('type') ，但还有其他方法

【参考方案1】：

canvas.getActiveObject().get('type') simmi simmi 说的是正确的。您还可以收听事件：

function onObjectSelected(e) 
  console.log(e.target.get('type'));

canvas.on('object:selected', onObjectSelected);

【讨论】：

我正在寻找取消选择的事件，并在 fabric.js 网站上找到了不错的演示 - fabricjs.com/events

【参考方案2】：

我使用以下代码解决了这个问题::

  if(canvas.getActiveObject().get('type')==="text")
        
            //Display text panel
            console.log('text panel Displayed');
            $("#Image_left_panel").css("display", "none");
            $("#shape_left_panel").css("display", "none");
            //$("#left_panel").css("display", "block");
        
        else if(canvas.getActiveObject().get('type')==="Image")
        
            //Display Image Panel
            console.log('Image Panel Displayed');
            $("#Image_left_panel").css("display", "block");
            $("#shape_left_panel").css("display", "none");
            $("#left_panel").css("display", "none");
        
        else
        

        


        );

【讨论】：

任何形状怎么样？ .get('type') 返回 'rect'、'circle' 等

@PaulRedmond 是的，它返回确切的对象类型。矩形、圆形、图像、...

对于那些使用更高版本的fabric js的人。我认为您的意思是 object.get('type') === 'textbox' 而不是 'text'

【参考方案3】：

试试isType()

获取选定对象的示例函数

function onObjectSelected(o)
    //activeObject = canvas.getActiveObject()
    activeObject = o.target;

    if(activeObject.isType('text'))
       //display text logic
    
    else if(activeObject.isType('image'))
      //display image
    
    else if( activeObject.isType('xyz'))
      //display shape logic
    


canvas.on('object:selected', onObjectSelected);

【讨论】：

对于那些使用更高版本的fabric js的人。我认为您的意思是 object.get('type') === 'textbox' 而不是 'text'

【参考方案4】：

在fabricjs 3.4及以上，要获取对象类型，只需使用：

var objType = canvas.getActiveObject().type;

在 IText 对象上，上面将返回：i-text

在图片上，它会返回：image

用法：

调用以下函数，该函数会添加额外检查以确保 type 是活动元素的属性。

注意：并非所有元素都具有 type 属性。

 canvas.on('object:selected', onObjectSelected);

 function onObjectSelected()  
     // check if type is a property of active element
     var objType = (canvas.getActiveObject().type ? canvas.getActiveObject().type : "");

     // your code to process the object