動態組的訪問元素

Question

我想用Kinetic構造一個Button對象的等價物，並且遇到問題。

我將Rect和Text對象分組以形成按鈕。我想在Button創建後修改這些對象的屬性。這是我到目前爲止。

問題是我想改變文本，矩形顏色和筆畫以及位置，但對我而言並不明顯如何訪問組內的節點來執行此操作。

小提琴@http://jsfiddle.net/oviron/Y4XXC/

<button id="more">Add a new Line</button> 
<button id="col">color</button> 
<button id="rng">ring</button> 
<button id="nam">name</button> 
<div id="container"></div> 

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 350, 
    height: 350 
}); 

var layer = new Kinetic.Layer(); 
stage.add(layer); 

var r1 = addRect(10, 10, 35, 35, "red", 99); 

function addRect(x, y, w, h, c, txt){ 
    var grp = new Kinetic.Group(); 
    var rectangle = new Kinetic.Rect({ 
     x: x, 
     y: y, 
     width: w, 
     height: h, 
     fill: c, 
     stroke: "black", 
     strokeWidth: 2 
    }); 

    var rectangleText = new Kinetic.Text({ 
     x: x + 5, 
     y: y + 5, 
     text: txt, 
     fontSize: 18, 
     fontFamily: 'Calibri', 
     fill: 'white', 
     align: 'center' 
    }); 

    grp.add(rectangle); 
    grp.add(rectangleText); 
    layer.add(grp); 
    layer.draw(); 
    return grp; 
} 

$("#more").click(function(){ 
    var x1=Math.random()*200+10; 
    var y1=Math.random()*200+10; 
    r1.setX(x1); 
    r1.setY(y1); 
    layer.draw(); 
}); 

$("#col").click(function(){ 
    r1.setFill("green"); 
    layer.draw();  
}); 

$("#rng").click(function(){ 
    r1.setStroke("red"); 
    layer.draw();  
}); 

$("#nam").click(function(){ 
    //var shape = r1.find('#rectangleText')[0]; 
    this.get('.rectangleText').setText(prompt('66')); 
    //children.setText("TEST"); 
    //shape.setText(Math.random()*100); 
    //shape.getLayer().draw(); 
    layer.draw();  
}); 

Answer 1

你R1是該組的參考。

您需要更改組內矩形的顏色，因此您需要參考矩形本身。

要改變矩形的顏色組內：

var rect=r1.find("Rect")[0]; 
rect.setFill("green"); 
layer.draw(); 

與同組內的文本。

var text=r1.find("Text")[0]; 
text.setText("anything new"); 
layer.draw();