Question

我正在尝试使用Kinetic构造一个Button对象的等价物，并遇到了一个问题。

我正在对一个Rect和一个Text对象进行分组以形成按钮。我想在创建Button之后修改每个对象的属性。这是我到目前为止所拥有的。

问题在于我想要更改文本，Rect颜色和笔触以及位置，但是对于我来说如何访问组内的节点来做这件事并不明显。

<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是对该组的引用。

您需要更改组内rect的颜色，因此需要对Rect本身的引用。

要更改组内rect的颜色：

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

与小组内的文字相同。

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

访问动力学组的元素

1 个答案: