1

この問題は私を悩ませてきました、そして私はこの問題を解決するための最良の方法への洞察を探しています。

Raphael.jsで生成した楕円の円周に沿って移動したいdiv$（ "。sun"）があります。これにより、楕円は画面と同じ幅で水平方向に中央に配置され、高さも同じになります。幅の半分として、絶対に0,0（左上）に配置されます。

//draw ellipse that is as wide as the window and half as tall as the width
var paper = Raphael(document.getElementById("ellipse"), Wwidth, halfIt);
var c = paper.ellipse(Wwidth/2, halfIt/2, Wwidth/2, halfIt/2);
c.attr({'fill': 'transparent', 'stroke': 'red'});

ここにjsfiddle（デモ用にjsfiddleの値を変更）

楕円は、天体が空を移動する経路を定型化したものです。これは、午前6時に、太陽が画面の左端の楕円の主軸にあることを意味します。正午には太陽が画面の上部中央にあり、午後6時に太陽は楕円の主軸の右端にあります。

度で表すと、午前6時= 180度、正午12時= 90度、午後3時=45度などです。基本的に、午前6時から午後6時までの各時間は15度離れています。分数の計算を追加します。

var hours = new Date().getHours();
(removed code that converts the numerical hour to my stylized degrees for brevity)
var mins = new Date().getMinutes();     
var minsdegree = mins * .25;    
var skyangle = hourdegree + minsdegree;

たとえば、午前11時39分だった場合、スカイアングルは114.75度になります。

課題： 時間に応じてカスタム角度に対応するように、楕円のパスに沿って太陽をアニメートするにはどうすればよいですか。技術的には、ページの読み込み時に正しい角度に対応するだけで、「アニメーション化」する必要はありません。ただし、ページを十分に長く開いたままにしておくと、パスに沿ってアニメーション化するのが適切です。

4

3 に答える 3

2

どうぞ： http： //jsfiddle.net/y47Cr/54/

毎秒更新します。

于 2012-08-03T17:22:09.677 に答える
1

あなたのフィドルは機能しないので無視します。次の変数があると仮定します。

  • cx、cy-楕円の中心の座標。
  • rx、ry-楕円のxおよびy半径。
  • skyangle-楕円にマッピングされる現在の角度。
  • sun_width、sun_height-太陽のdivの幅と高さ。
  • sun_margin-太陽と楕円の間に許容する追加のギャップの値（ピクセル単位）（0の場合、太陽は中央に配置されます）

このJavaScriptを使用して、太陽を配置する場所を計算できるはずです。

var sun_x = cx + Math.cos( Raphael.rad( skyangle ) ) * ( rx + sun_width + sun_margin );
var sun_y = cy + Math.sin( Raphael.rad( skyangle ) ) * ( ry + sun_height + sun_margin );

とても簡単です。しかし、私が説得している間、jeffery_the_windがそれを釘付けにしたと私は信じています。

于 2012-08-03T17:28:12.267 に答える
0

座標を解くために正弦関数を使用したいと思うでしょう。x軸が長いため、x座標を乗数で実行する必要があります。

これが私が思いついたアイデアです。数学からしばらく経ちましたので、私の用語のいくつかは間違っているかもしれません。

var x, y, top, left,
    originX = 100,
    originY = 50,
    axisLengthX = originX*2,
    axisLengthY = originY*2,
    dist = Math.sin(deg) * axisLengthX,
    sunEle = document.getElementById("sun");

x = dist;
y = dist * (axisLengthX / axisLengthY); // relationship between X and Y axis length of ellipse

top = originY - y;
left = originX - x;

sunEle.style = "top: " + top + "; left:" + left;
于 2012-08-03T17:15:46.450 に答える