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循环来循环播放文本，但jsfiddle的KineticJS库似乎已经过时了，因为它不知道find方法。

Answer 2

一种有效的方式：

在屏幕外的画布上渲染文字圆圈。
使用.toDataURL
从该屏幕外图像创建一个Kinetic.Image。
然后，您可以根据需要有效地旋转/动画Kinetic.Image。

KineticJS旋转/动画文本

2 个答案: