2013-11-20 14 views
19

Ich möchte programmgesteuert Fabrics.js Objekt auswählen. Was muss ich tun? Zum Beispiel, Ich füge zwei Objekte wie folgt aus:Wie Sie Fabric.js Objekt programmgesteuert auswählen

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

und ich habe zwei während Sie die Taste

  1. wählen Rechteck
  2. wählen zweite Objekt

Namen klicken Während klicken Wenn Sie auf die Schaltfläche zum Auswählen eines zweiten Objekts klicken, sollte der zweite Objektkreis ausgewählt werden.

Hier ist die Jsfiddle für die Problemumgehung.

Ich goggled und satt, hier bin ich auf der Suche nach einem Punkt, wie ich anfangen soll.

EDIT

Ich mag für jedes Objekt die ID haben, sollte es möglich sein, das Objekt zu wählen, dass die ID, warum ich dies bin zu fragen, während die kollaborative Dinge verwenden, können wir nicht sagen, Sicherlich haben alle verbundenen Knoten das Element im gleichen Index, so dass eine eindeutige ID nützlich sein wird.

+1

@kangax bitte helfen Sie in diesem –

Antwort

17

Ja, Sie ID für jedes Element, indem Sie den folgenden Code in all.js

In der fabric.js baut Version 1.3.0 einstellen: In die Objektdeklaration

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

Jetzt können Sie die Objekt-ID-set mit:

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

Sie können die Objekt-ID mit abrufen:

Myid= canvas.getActiveObject().get('id'); 
+0

danke jetzt kann ich die ID +1 hinzufügen, können Sie mir sagen, ist es möglich zu wählen das Objekt mit dieser ID? wenn ja bitte geben Sie mir das Beispiel dafür –

+0

In jedem Fall müssen Sie alle Objekte durchlaufen und prüfen, ob die aktuelle Objekt-ID == die ID des Objekts, das Sie benötigen! Simple..if ja einige Aktion .. – John

+0

ya Ich denke an das erste, aber ich fühle, dass ist kein guter Weg, wenn wir die riesige Anzahl von Objekt haben, ist es? –

59

Sie verwenden möchten:

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

In den Knöpfen Ereignis

Die Zahl entspricht der Reihenfolge, in der das Objekt auf die Leinwand hinzugefügt wurde klicken.

Siehe hier:

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

+2

Schön! können wir nicht die Artikelnummer onclick erhalten und dann an 'canvas.setActiveObject (canvas.item (itemNumber)) übergeben;' – softvar

+1

Gibt es eine Möglichkeit, Artikel Nummer ausgewählt werden (onclick)? – softvar

+0

@danbrown gibt es eine Möglichkeit, die ID für das Element zu setzen, weil ich mag es kollaborative tun .... also wenn Sie nach Position auswählen würde es in jeder Person anders sein, wenn wir einige einzigartige ID hinzufügen und holen können wäre was gutes. +1 für Ihren wertvollen Vorschlag –

3

die Stoff Objektnummer (Artikelnummer) Um die ausgewählte Objekt Verwendung:

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

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

var id ist die gleiche Zahl, wenn Sie programmgesteuert das Objekt wie in Dan Browns Antwort:

canvas.setActiveObject(canvas.item(id)); //id = 0, 1, 2 etc. 
Verwandte Themen