web-dev-qa-db-ja.com

選択したオブジェクトのタイプを識別する方法は？

私は、Fabric.jsを使用してキャンバスにテキスト、画像、および形状を配置しています。 3つすべてに3つの異なる編集パネルを作成しました。ユーザーがテキストを選択すると、テキストパネルを表示します。画像や形状についても同様です。

選択したオブジェクトのタイプを識別する方法は？

javascriptjqueryhtmlcanvasfabricjs
19
anam

canvas.getActiveObject().get('type') simmi simmiによると正しい。イベントを聞くこともできます：

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

私は次のコードを使用してこの問題を解決しました：

  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

試してみてください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);
8
Renon Stewart

Fabricjs 3.4では、オブジェクトタイプを取得するには、次を使用します。

var objType = canvas.getActiveObject().type;

ITextオブジェクトでは、上記は次を返します：i-text

画像の場合、次が返されます：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