实时显示太阳在天空上的位置-如何？ [英] Show where the sun is on the sky in real time - how?

问题描述

我正在使用

就像我说的那样，我将使用mourner函数中的 getPosition（）函数，该函数会打印方位角和太阳的高度。我现在面临的问题是将数据以某种方式转换为百分比或像素，因此上面示例中的太阳沿圆线移动（是的，太阳必须被模拟地面的直线遮挡），

方位角数据看起来像-0.7000179547193575，海拔高度是这样的：-0.699671080144066（基于当前太阳位置现在是）。

我该如何实现？我可以使用纯CSS做到这一点，还是必须使用图像来做到这一点？

解决方案

我不知道确切的公式但是这里有一个想法，您可以使用CSS来创建它，然后只需调整不同的值即可。

  var sun = document.querySelector（'。sun'）; function update（）{var x = Math.random（）* 180; var y = Math.random（）* 40; sun.style.transform = rotateX（ + y + deg）rotation（ + x + deg）}  

  .container {width：300px;高度：150px;保证金：自动;溢出：隐藏border：1px solid;}。sun {margin：20px; padding-top：calc（100％-40px）;位置：相对；边界半径：50％；边框：1px纯灰色；转换：rotateX（20deg）rotation（20deg）;背景：线性渐变（红色，红色）中心/ 100％1px；背景重复：不重复； transition：1s;}。sun：be {内容：;之前位置：绝对； top：calc（50％-20px）;左：-20px;宽度：40px;高度：40px;背景：黄色； border-radius：50％;}  

 < div类= container>< div class = sun>< / div>< / div>< button onclick = update（）> update< / button>  

使用下面的代码，您只需要将值转换为度数即可旋转 sun 元素并将太阳放置在正确的位置。

I am using a function from mourner/suncalc that allows me to get the current position of our sun. With getPosition(), I want to create an animation on a image or with pure CSS (scaleable to different screen resolutions and orientations, of course), where you can see where the sun is right now in real time on the page. A totally unnecessary function but a fun function :) The image below illustrates how I am thinking.

Like I said, I'll be using the getPosition() function from mourner's function which prints azimuth and altitude of the sun. The problem I am facing now, is to somehow convert this data to percents or pixels, so the sun in my example image above moves along the round line (and yes, the sun must be blocked by the straight line that imitates the ground), imitating the real position on the sky in real life.

The azimuth data looks like -0.7000179547193575 and the altitude like this: -0.699671080144066 (based on the current sun position where I am right now).

How do I accomplish this? Can I do this with pure CSS or do I have to do it with images?

解决方案

I don't know the exact formula but here is an idea how you can create this using CSS then you simply have to adjust different values.

var sun = document.querySelector('.sun');

function update() {
  var x = Math.random() * 180;
  var y = Math.random() * 40;
  sun.style.transform="rotateX("+y+"deg) rotate("+x+"deg)"
}

.container {
  width:300px;
  height:150px;
  margin:auto;
  overflow:hidden;
  border:1px solid;
}
.sun {
  margin:20px;
  padding-top:calc(100% - 40px);
  position:relative;
  border-radius:50%;
  border:1px solid grey;
  transform:rotateX(20deg) rotate(20deg);
  background:
    linear-gradient(red,red) center/100% 1px;
  background-repeat:no-repeat;
  transition:1s;
}
.sun:before {
  content:"";
  position:absolute;
  top:calc(50% - 20px);
  left:-20px;
  width:40px;
  height:40px;
  background:yellow;
  border-radius:50%;
}

<div class="container">
<div class="sun">

</div>
</div>
<button onclick="update()">update</button>

Using the code below you simply need to convert your values to a degrees in order to rotate the sun element and place the sun in the correct place.

这篇关于实时显示太阳在天空上的位置-如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！