Question

我知道transitionTo不再是Kinetic中支持的功能。所以，我的问题是，我该怎么做旋转文字？我的id为'rotate'的文本需要是垂直的，而文本的其余部分保持水平。因此，由于transitionTo不再有用，我该如何旋转此文本？

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

Answer 1

现在使用Kinetic.Tween：

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

tween.play();

旋转动力学文本

1 个答案: