kineticjs rect fillText

У меня прямоугольник KineticJS уже заполнен «синим» цветом, я хочу показать текст в этом прямоугольнике. Но мой код ниже ничего не показывает. Также мне нужно назначить этот текст метки при нажатии кнопки, код для этого также ниже.

drawShape = new Kinetic.Rect({
            id: shapeId,
            name: shapeName,
            x: 0,
            y: 0,
            width: 150,
            height: 40,
            fill: "#00D2FF",
            stroke: "black",
            strokeWidth: 3,
            fillText: "Step" + stepNumber            
        });

function OnApplyPropertiesClick(){
drawShape.fillText(document.getElementById("txtLabel").value);  
}

любая помощь по этому поводу ?? пожалуйста.

Спасибо Биру


javascript canvas kineticjs
person user1814818    schedule 10.11.2012    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Я не думаю, что вы можете добавить текст к объекту прямоугольника, только тип заливки:

[цвет, линейный градиент, радиальный градиент или узор]

Чтобы решить эту проблему, я создал группу, затем добавил к ней прямоугольник и текстовый объект, когда я хотел создать прямоугольник с текстом на нем:

var group = new Kinetic.Group({

});

var rectangle = new Kinetic.Rect({

    x: 5,
    y: 5,
    width: 80,
    height: 35,
    fill: "green",
    stroke: "black",
    strokeWidth: 2

});

var rectangleText = new Kinetic.Text({

    x: 15,
    y: 10,
    text: 'test',
    fontSize: 20,
    fontFamily: 'Calibri',
    textFill: 'black'

});

group.add(rectangle);
group.add(rectangleText);
layer.add(group);

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

Я сделал jsfiddle, чтобы показать, что я имею в виду:

http://jsfiddle.net/B85Ff/

person Craigeve    schedule 17.11.2012

arrow_upward
0
arrow_downward

Вы уже добавили drawShape на какой-либо слой? Не отображается в опубликованном вами фрагменте. Кроме того, вам нужно нарисовать слой (например, обновить) в конце вашей функции OnApplyPropertiesClick ().

person Ani    schedule 11.11.2012
comment
Я пробовал, но не работал, взгляните на этот базовый пример: html5canvastutorials. com / kineticjs /, если вы добавите сюда fillText: 'ABC Show', он ничего вам не покажет. - person user1814818; 12.11.2012
comment
почему бы не использовать объект Kinetic.Text вместо Kinetic.Rect? проверьте это руководство: html5canvastutorials.com/kineticjs/ - person Ani; 12.11.2012