1

这个问题让我发疯了，我正在寻找解决这个问题的最佳方法。

我有一个 div $(".sun") 我想沿着椭圆的圆周移动，这是我用 Raphael.js 生成的，所以椭圆与屏幕一样宽，水平居中，和一样高作为宽度的一半，并且绝对定位在 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 here（在 jsfiddle 中更改了用于演示的值）

椭圆是天体在天空中行进路径的程式化表示。这意味着在早上 6 点，太阳位于屏幕最左侧的椭圆长轴上。中午 12 点，太阳将位于屏幕的顶部中心，下午 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，skyangle 将等于 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 回答