KineticJS вращающийся/анимационный текст

Question

У меня есть эта скрипка, где у меня есть текст, расположенный по кругу, теперь я хотел бы оживить его и повернуть текст по часовой стрелке/против часовой стрелки.

Каждая демонстрация анимации, которую я видел, использует в качестве отправной точки контейнер, но все примеры, которые я мог найти о манипулировании текстом в круговой компоновке, все началось с элемента. Я попробовал 100 вариантов, пытаясь заставить это работать, но я либо что-то пропустил, либо это невозможно с конструкцией, которую я использовал до сих пор.

Вот скрипка для кругового текста я до сих пор: http://jsfiddle.net/jamesburt/Sa2G8/

<canvas id="canvas1" width="500" height="500"></canvas> 
var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 

Где, как примеры анимации начать с:

<div id="container"></div> 
var stage = new Kinetic.Stage({container: 'container'}); 

Я открыт для любых идей/переписывание необходимо, поскольку в конечном итоге моя цель - анимированный круг текста. Также, если это легко сделать в альтернативе KineticJS, мне было бы интересно попробовать это.

Answer 1

Вот демо я сделал с помощью KineticJS: http://jsfiddle.net/Moonseeker/Xf7hp/

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 500, 
    height: 500 
}); 

var layer = new Kinetic.Layer(); 

var myText = "My text in a circle. "; 
var centerCoords = {x:250, y:250}; 

for(var i=0;i<myText.length;i++){ 
    var rotation = i*360/myText.length; 
    var oneChar = new Kinetic.Text({ 
     x: centerCoords.x, 
     y: centerCoords.y, 
     text: myText[i], 
     fontSize: 30, 
     fontFamily: 'Calibri', 
     fill: 'green', 
     offset: {x:0, y:100}, 
     rotationDeg: rotation 
    }); 
    layer.add(oneChar); 
} 

// add the layer to the stage 
stage.add(layer); 

var angularSpeed = Math.PI/2; 
var anim = new Kinetic.Animation(function(frame){ 
    var angleDiff = frame.timeDiff * angularSpeed/1000; 
    for(var i=0;i<layer.children.length;i++){ 
     layer.children[i].rotate(angleDiff); 
    }; 
}, layer); 
anim.start(); 

Вы можете вращать в любом направлении или скорости вы хотите, вы можете изменить стиль круга.

Вы должны иметь возможность использовать layer.find('Text').each() вместо цикла for для циклического прохождения текста, но библиотека KineticJS в jsfiddle кажется устаревшей, поскольку она не знает метод find.

Answer 2

один эффективный способ:

• Рендер ваш текст вокруг-а-круг на холсте с закадровым.

• Сохранить, что закадровый холст как изображение, используя .toDataURL

• Создать Kinetic.Image из этого закадровым изображения.

• Затем вы можете эффективно вращать/анимировать Kinetic.Image по мере необходимости.