KineticJS旋轉/動畫文本

-1

我有這個小提琴，我有文本排列在一個圓圈，我想現在爲它製作動畫並按順時針/逆時針方向旋轉文本。KineticJS旋轉/動畫文本

我看過的每個動畫演示都使用容器作爲起點，但是我可以找到關於操作循環佈局中的文本的所有示例，都以元素開始。我嘗試了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的替代品中實現，那麼我會有興趣嘗試一下。

來源

2013-11-22 James Burt

這裏是一個演示中，我使用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方法。

來源

2013-11-27 10:21:13 Moonseeker

我無法讓小提琴在兩臺不同的機器上運行......我將代碼轉到http://www.html5canvastutorials.com/，並將其中一個替換爲與它的例子正確地開了火，我試圖從兩臺機器，所以不知道發生了什麼。但它的工作原理和旋轉。 –

所以它在html5canvastutorials上工作？當您無法使用它時，請觀察控制檯是否出現錯誤。你可能有更舊的庫，甚至缺少庫。 – Moonseeker

一種有效的方法：

渲染你的屏幕外的畫布上的文本圍繞頭一個圈。
保存屏幕外的畫布使用.toDataURL
將圖像從屏幕外的圖像創建Kinetic.Image。
然後，您可以根據需要有效地旋轉/設置Kinetic.Image的動畫。

來源

2013-11-23 16:05:06 markE

謝謝，我會試試 –

KineticJS旋轉/動畫文本

回答

相關問題