CODEWITHSUNDEEP
htmltextcanvastimerkineticjs
Kris
Kris

Reputation: 640

KineticJS setText method to update like a Timer

I need to update the text property of a KineticJS text like a timer. but my below code doent work as expected, what I am doing wrong:

var dateTimeText = new Kinetic.Text({
            x: 40,
            y: 400,
            text: "Sample",
            fontSize: 18,
            width: 700,
            fontFamily: 'Calibri',
            fill: 'black',
            width: 700,
            padding: 10,
            align: 'right',
            draggable: true
        });
setInterval(function () { onUpdateTime() }, 1000);
        function onUpdateTime() {
            var date = new Date();
            dateTimeText.setText(date.toLocaleTimeString());
        }

In the onUpdateTime(), should I do manipulations on dateTimeText. When adding the draggable attribute on dateTimeText() and when clicking on it, i can atleast see the updated value :)

Upvotes: 1

Views: 2143

Answers (1)

SoluableNonagon
SoluableNonagon

Reputation: 11755

Try this:

    function onUpdateTime() {
        var date = new Date();
        dateTimeText.setText(date.toLocaleTimeString());
        // layer.draw(); // either this, or whatever the layer is called
        // dateTimeText.getParent().draw(); // or this, auto get parent layer
        dateTimeText.getLayer().draw(); // better solution suggested by Eric Rowell
    }

Upvotes: 6

Related Questions