Question

我使用Fabric.js在Text上放置文本，图像和形状，我为这三个创建了三个不同的编辑面板。当用户选择文本时，我想显示文本面板。像图像和形状一样明智。

我的问题是如何识别所选对象的类型??

谢谢，

Answer 1

正如simmi simmi所言，

canvas.getActiveObject().get('type')是正确的。您还可以收听活动：

function onObjectSelected(e) {
  console.log(e.target.get('type'));
}
canvas.on('object:selected', onObjectSelected);

Answer 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
        {

        }


        });

Answer 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);

Answer 4

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

var objType = canvas.getActiveObject().type;

在IText对象上，以上内容将返回： i-text

在图片上，它将返回：图片

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

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

识别Fabricjs中所选对象的类型

4 个答案: