CODEWITHSUNDEEP
javascriptcanvaskineticjs
user1814818
user1814818

Reputation: 21

kineticjs rect fillText

I have KineticJS rect already fill with 'blue' color, I want to show Text on this rect box. But my below code not showing anything. Also I need to assign this label text on button click, the code for the same is also below.

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);  
}

any help on this?? please.

Thanks Biru

Upvotes: 2

Views: 3737

Answers (2)

Craigeve
Craigeve

Reputation: 155

I don't think you can add text to a rectangle object, only a fill type of:

[color, linear gradient, radial gradient, or pattern]

To solve this i created a group, then added a rectangle and text object to it, when i wanted to create a rectangle with text on it:

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);

You should be able to adapt your listener to then apply it to this.

I've done a jsfiddle to show what i mean:

http://jsfiddle.net/B85Ff/

Upvotes: 5

Ani
Ani

Reputation: 1655

Have you added drawShape to any layer yet? Doesn't appear in the snippet you posted. Also, you need to draw the layer (like a refresh) at the end of your OnApplyPropertiesClick() function.

Upvotes: 0

Related Questions