時間情報に基づいて線 (x 座標と y 座標) を表示する関数があります。x 座標と y 座標は描画されたポイントの位置を指定し、時間はそれぞれのポイントのタイムスタンプ (ミリ秒単位) を表します。
現在、以下のように行を表示する機能があります
<script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<script type="text/javascript">
function drawLine(points) {
var paths = ['M ' + points[0].x + ' ' + points[0].y];
for (var i = 1; i < points.length; i++) {
var p = points[i];
paths.push(paths[i - 1] + ' L ' + p.x + ' ' + p.y);
}
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var line = paper.path(paths[0]);
var next = 1;
function animate() {
if (paths[next]) {
duration = points[next].t - points[next - 1].t
line.animate({ path: paths[next] }, duration, 'linear', animate);
next++;
}
}
animate();
}
</script>
この関数は、次のように連想配列を使用して呼び出すことができます。
drawLine([
{ x: 0, y: 0, t: 0 },
{ x: 100, y: 230, t: 1520 },
{ x: 210, y: 290, t: 3850 },
{ x: 150, y: 200, t: 5060 },
]);
問題は、この関数を線ではなく点を表示するように変更するにはどうすればよいかということです。