Доступ к элементам кинетической группы

Я пытаюсь создать эквивалент объекта Button с помощью Kinetic и столкнулся с проблемой.

Я группирую объект Rect и Text, чтобы сформировать кнопку. Я хочу изменить свойства каждого из этих объектов после создания кнопки. Вот что у меня есть до сих пор.

Проблема в том, что я хочу изменить текст, цвет и обводку Rect, а также положение, но мне не ясно, как получить доступ к узлам в группе, чтобы сделать это.

Скрипт @ 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();    
});

kineticjs
person BobD    schedule 11.01.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваш r1 является ссылкой на группу.

Вам нужно изменить цвет прямоугольника внутри группы, поэтому вам нужна ссылка на сам прямоугольник.

Чтобы изменить цвет прямоугольника внутри группы:

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

То же самое с текстом внутри группы.

var text=r1.find("Text")[0];
text.setText("anything new");
layer.draw();
person markE    schedule 11.01.2014
comment
Я вижу сейчас. Ну, я был близок, когда попробовал shape = r1.find('#rectangleText')[0]; Я думал, что параметр для вызова find должен ссылаться на узел в группе, но он ссылается на тип в группе. Значит ли это, что индекс [0] относится к тому, есть ли в группе более одного такого типа? - person BobD; 12.01.2014
comment
Точно, .find вернет набор кинетических объектов, поэтому [0] получит первый из набора. Если вам нужен более совершенный .find, вы можете установить свойство id:myShape' в myShape и получить его напрямую с помощью .find(#myShape)[0]. - person markE; 12.01.2014