web-dev-qa-db-ja.com

Fabric.jsオブジェクトをプログラムで選択する方法

Fabrics.jsオブジェクトをプログラムで選択したい。私は何をしなければなりませんか？たとえば、次のような2つのオブジェクトを追加しています。

var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect({
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  }));

 canvas.add(new fabric.Circle({
    left: 200,
    top: 200,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
  }));

という名前のボタンをクリックしながら2つのボタンがあります

  1. 長方形を選択
  2. 2番目のオブジェクトを選択

長方形の選択ボタンをクリックすると、長方形の形状が選択され、2番目のオブジェクトの選択ボタンをクリックすると、2番目のオブジェクトの円が選択されます。

回避策として Jsfiddle を示します。

私はゴーグルとうんざりして、ここでいくつかのポイントを開始する方法を探しています。

[〜＃〜] edit [〜＃〜]

私は各オブジェクトのIDを持っているのが好きです、そのIDを使用してオブジェクトを選択することができるはずです、なぜ私がこれを求めているのですか？インデックスなので、一意のIDが役立ちます。

javascriptcanvasfabricjs
27
Thirumalai murugan

はい、all.jsに以下のコードを追加することにより、各アイテムにIDを設定できます

Fabric.jsビルドバージョン1.3.0で：オブジェクト宣言に追加

 var object = {
   id:   this.id,
   remaining properties in all.js
  }

これでオブジェクトIDを設定できます：

canvas.getActiveObject().id=your id value;

オブジェクトIDは次の方法で取得できます。

Myid= canvas.getActiveObject().get('id');
21
John

使用したい：

 canvas.setActiveObject(canvas.item(0));

ボタンをクリックしてイベント

この番号は、オブジェクトがキャンバスに追加された順序に対応しています。

こちらをご覧ください：

http://jsfiddle.net/ThzXM/1/

69
Dan Brown

選択したオブジェクトのファブリックオブジェクト番号（アイテム番号）を見つけるには、次を使用します。

canvas.on({
    'object:selected': selectedObject
});

function selectedObject(e) {
    var id = canvas.getObjects().indexOf(e.target);
}

プログラムでオブジェクトを設定した場合、Dan Brownの返信のようにvar idは同じ数値になります。

canvas.setActiveObject(canvas.item(id)); //id = 0, 1, 2 etc.
8
Dradge

オブジェクトにIDを追加します。

var canvas = new fabric.Canvas('canvas');

canvas.add(new fabric.Rect({
    id: 123,
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
}));

canvas.add(new fabric.Circle({
    id: 456,
    left: 200,
    top: 200,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
}));

function removeSpot(canvas, id) {
    canvas.forEachObject(function(obj) {
        if (obj.id && obj.id === id) canvas.remove(obj);
    });
}

// remove rect
removeSpot(canvas, 123);

// remove circle
removeSpot(canvas, 456);
0
Brad