私は、Fabric.jsを使用してキャンバスにテキスト、画像、および形状を配置しています。 3つすべてに3つの異なる編集パネルを作成しました。ユーザーがテキストを選択すると、テキストパネルを表示します。画像や形状についても同様です。
選択したオブジェクトのタイプを識別する方法は?
canvas.getActiveObject().get('type')
simmi simmiによると正しい。イベントを聞くこともできます:
function onObjectSelected(e) {
console.log(e.target.get('type'));
}
canvas.on('object:selected', onObjectSelected);
私は次のコードを使用してこの問題を解決しました:
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
{
}
});
試してみてください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);
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);