CODEWITHSUNDEEP
javascriptjquerycanvaskineticjs
user2144857
user2144857

Reputation:

Rotating kinetic text

I understand that transitionTo is no longer a supported function within Kinetic. So, my question is, how do I go about rotating text? I have text with an id of 'rotate' that needs to be vertical while the rest of the text stays horizontal. So, since transitionTo is no longer useful, how do I rotate this text?

$(xml).find("text").each(function(){                        
    var coords = $(this).attr("transform");
    var matrix = coords.split(" ");
    var textX = parseInt(matrix[4]);
    var textY = matrix[5];
    textY = parseInt(textY.substr(0, textY.length - 1));

    var font = parseInt($(this).attr("font-size"));
    var tspan = $(this).find("tspan");
    var type = $(this).attr("id");

    if(typeof $(this).attr("font-size") == "undefined"){
        font = parseInt(tspan.attr("font-size"));
    }

    if(typeof type !== "undefined"){
        if(type.substr(0,5) == "rotate"){
            type = "rotate";
        }
    }

    if(type == 'rotate'){
        text.transitionTo({
            rotation: 270
        });
    }
    text = new Kinetic.Text({
        x: textX,
        y: textY,
        text: full_text,
        fontSize: font,
        fontFamily: 'Arial',
        fill: 'black',
        align: talign
    });
});

Upvotes: 0

Views: 125

Answers (1)

markE
markE

Reputation: 105035

Use Kinetic.Tween's now:

var tween = new Kinetic.Tween({
  node: text, 
  duration: 1,
  rotation: 270
});

tween.play();

Upvotes: 0

Related Questions