KineticJS: ako získať všetky Rect / etc. a ako nastaviť vlastné ID? - kineticjs

Používam KineticJS a pridám niektoré obdĺžniky do vrstvy:

var kNode = new Kinetic.Rect({
x: 300,
y: 300,
cornerRadius: 8,
fill: "#ffffff",
strokeWidth: 1,
stroke: "#cccccc",
width: 200,
height: 100,
draggable: true
});

kNode.customAttrs = new Object(); // attributes that I need as reference
kNode.customAttrs.chosen = 0;

Potrebujem:

• priradiť a vlastné ID(GUID) pre každý obdĺžnik. Snažil som sa kNode.id ( "idaa23434") (ako je napísané v dokumentácii: http://kineticjs.com/docs/Kinetic.Rect.html ), ale povie mi, že objekt nemá id metódy ().
• Musím dostať ARRAY so všetkými tými rect ktorého atribút kNode.customAttrs.chosen (ktorý som pridal s výhodou, že Rect je objekt) je == 1. Normálne používam jQuery selector $ ( "Uzol [vybraný =" 1 "]") ale keďže Rect nie sú prvky DOM, nemôžem to urobiť.
• je nejaký spôsob, ako dostať zodpovedajúcim prvkom DOM na Rect? Pokúsil som sa zobraziť HTML v Nástrojoch pre vývojárov Chrome, ale nezobrazil sa žiadny prvok DOM.

Ďakujeme vopred za akúkoľvek stopu.

EDIT:

Nechápem, prečo pomocou

console.log(stage);

v jsfiddle Získam tento výstup (konzola pre vývojárov Chrome):

Kinetic.Stage {nodeType: "Stage", children: Kinetic.Collection[1], _id: 1, eventListeners: Object, attrs: Object…}

ale v mojej aplikácii dostanem: (kód je podobne)

Kinetic.Stage {children: Kinetic.Collection[1], _id: 1, eventListeners: Object, attrs: Object, cache: Object…}

V skutočnosti, keď som použiť stage.find () na jsfiddle to funguje, ale v mojej aplikácii nie je "t (*Uncaught TypeError: Object [object Object] nemá žiadnu metódu "find" *).

Akékoľvek vodítko? Mám rovnaký problém pri práci s plátno prvky, pretože som dostal prevObject, ale nie samotný predmet.

odpovede:

3 pre odpoveď č. 1

V KineticJS je toto ID podobné id html:

// SET

kNode.setId(123);

// GET
//
// specify #123 to get an id
// .find returns a set so use [0] to get the first element

var id123 = stage.find("#123")[0];

id123.setFill("green");

V KineticJS je názov podobný html triede:

// SET

kNode.setName("chosen1");

// GET
// specify .chosen1 to get a name

var chosen1=stage.find(".chosen1");

chosen1.each(function(i){
i.setFill("blue");
});

demo: http://jsfiddle.net/m1erickson/vnEPL/

---

4 pre odpoveď č. 2

Všetky obdĺžniky môžete získať vo fáze pomocou:

rects = stage.find("Rect");
rects.each(function (node) {
//do what u want
}

Myslím, že to vyrieši váš problém

---