web-dev-qa-db-fra.com

Comment identifier le type d'un objet sélectionné?

Je place du texte, des images et des formes sur une toile à l'aide de Fabric.js. J'ai créé trois panneaux d'édition différents pour les trois. Lorsque l'utilisateur sélectionne du texte, je souhaite afficher le panneau de texte. comme sage pour l'image et les formes.

Comment identifier le type d'objet sélectionné?

javascriptjqueryhtmlcanvasfabricjs
19
anam

canvas.getActiveObject().get('type') comme l'a dit simmi simmi est correct. Vous pouvez également écouter des événements:

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

J'ai résolu ce problème en utilisant le code suivant ::

  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
        {

        }


        });
9
anam

Essayez isType()

Exemple de fonction pour obtenir des objets sélectionnés

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);
8
Renon Stewart

Dans fabricjs 3.4, pour obtenir le type d'objet, utilisez simplement:

var objType = canvas.getActiveObject().type;

Sur l'objet IText, ce qui précède renverra: i-text

Sur l'image, il renverra: image

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);
0
Jamal