javascript 数学函数：现在它形成一个圆，我需要做一个半圆

Question

这些是使用的代码，目前已经形成了一个完整的圆，但是我需要一个半圆。必须对 JS 函数进行更改，但我添加了 html 和 CSS 以供参考。

求助，谁能告诉我如何把它变成椭圆？ JS：

var items = document.querySelectorAll('.circle a');
for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*
  (1/l)*i*Math.PI)).toFixed(4) + "%";

  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*
   (1/l)*i*Math.PI)).toFixed(4) + "%";
}

.circle {
  width: 250px;
  height: 250px;
  opacity: 100%;
  
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.open.circle {
   opacity: 1;

   -webkit-transform: scale(1);
   -moz-transform: scale(1);
    transform: scale(1);
 }

.circle a {
  text-decoration: none;
  color: black;
  display: block;
  min-width: 1em;

  position: absolute;
  text-align: center;

}

.circle a:hover {
  color: #eef;
}

<nav class="circular-menu">

<div class="circle">
  <a href="" class="fa fa-home fa-2x">*</a>
  <a href="" class="fa fa-facebook fa-2x">*</a>
  <a href="" class="fa fa-twitter fa-2x">*</a>
  <a href="" class="fa fa-linkedin fa-2x">*</a>
  <a href="" class="fa fa-github fa-2x">*</a>
  <a href="" class="fa fa-rss fa-2x">*</a>
  <a href="" class="fa fa-pinterest fa-2x">*</a>
  <a href="" class="fa fa-asterisk fa-2x">*</a>
</div>

<a href="" class="menu-button fa fa-bars fa-2x"></a>

</nav>

Answer 1

从两个作业中的 2*(1/l)iMath.PI 中删除 2。现在您的代码依赖于 I 递增以满足 L，因此导致 2*(1/l)iMath.PI 的值增加 2Pi，从而形成一个圆圈。

如果我们将其增加的能力减半，它只会形成半个圆圈。也许我错了，还没试过:P

Answer 2

把数学分解一下就更容易理解了

const centerX = 50;
const centerY = 50;
const radius = 35;

var items = document.querySelectorAll('.circle a');
for(var i = 0, l = items.length; i < l; i++) {

  const angle = -0.5 * Math.PI - 2 * (1 / l) * i * Math.PI;

  items[i].style.left = (centerX - radius * Math.cos(angle)).toFixed(4) + "%";

  items[i].style.top = (centerY + radius * Math.sin(angle)).toFixed(4) + "%";
}

这应该更清楚您需要更改 angle

首先很难看出l vs i所以

for(var i = 0, len = items.length; i < len; i++) {

  const angle = -0.5 * Math.PI - 2 * (1 / len) * i * Math.PI;

那么让我们把数学分解一下让我们修改角度使其更清晰

  const zeroToOne = i / len;  // goes from zero to one
  const angleOffset = -0.5 * Math.PI;
  const angle = angleOffset - 2 * zeroToOne * Math.PI;

从 0 到 1 的值更容易进行 lerping。一旦我们有一个从 0 到 1 的值，我们就可以轻松地创建一个将其转换为任何范围的函数

  function lerp(start, end, zeroToOne) {
     return start + (end - start) * zeroToOne;
  }

所以

  const angleOffset = -0.5 * Math.PI;
  const startAngle = angleOffset;
  const endAngle = angleOffset - 2 * Math.PI;

  const zeroToOne = i / len;  // goes from zero to one
  const angle = lerp(startAngle, endAngle, zeroToOne);

现在您可以随意将 startAngle 和 endAngle 更改为您喜欢的任何内容。

const items = document.querySelectorAll('.circle a');

const centerX = 50;
const centerY = 50;
const radius = 35;
let startAngle = 0;
let endAngle = 2 * Math.PI;

function render() {
  for(var i = 0, len = items.length; i < len; i++) {
    const zeroToOne = i / len;  // goes from zero to one
    const angle = lerp(startAngle, endAngle, zeroToOne);
  
    items[i].style.left = (centerX - radius * Math.cos(angle)).toFixed(4) + "%";
    items[i].style.top = (centerY + radius * Math.sin(angle)).toFixed(4) + "%";
  }
}
render();

function lerp(start, end, zeroToOne) {
   return start + (end - start) * zeroToOne;
}

document.querySelector('#start').addEventListener('input', function(e) {
  const zeroToOne = e.target.value / e.target.max;
  startAngle = lerp(0, Math.PI * 2, zeroToOne);
  render();
});

document.querySelector('#end').addEventListener('input', function(e) {
  const zeroToOne = e.target.value / e.target.max;
  endAngle = lerp(0, Math.PI * 2, zeroToOne);
  render();
});

.circle {
  width: 250px;
  height: 250px;
  opacity: 100%;
  
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.open.circle {
   opacity: 1;

   -webkit-transform: scale(1);
   -moz-transform: scale(1);
    transform: scale(1);
 }

.circle a {
  text-decoration: none;
  color: black;
  display: block;
  min-width: 1em;

  position: absolute;
  text-align: center;

}

.circle a:hover {
  color: #eef;
}

<label>start:</label><input type="range" min="0" max="100" value="0" id="start">
<label>end:</label><input type="range" min="0" max="100" value="100" id="end">
<nav class="circular-menu">

<div class="circle">
  <a href="" class="fa fa-home fa-2x">*</a>
  <a href="" class="fa fa-facebook fa-2x">*</a>
  <a href="" class="fa fa-twitter fa-2x">*</a>
  <a href="" class="fa fa-linkedin fa-2x">*</a>
  <a href="" class="fa fa-github fa-2x">*</a>
  <a href="" class="fa fa-rss fa-2x">*</a>
  <a href="" class="fa fa-pinterest fa-2x">*</a>
  <a href="" class="fa fa-asterisk fa-2x">*</a>
</div>

<a href="" class="menu-button fa fa-bars fa-2x"></a>

</nav>

至于制作椭圆，现在我们已经把它分解成数学它应该更清楚了。这个

const radius = 35;

items[i].style.left = (centerX - radius * Math.cos(angle)).toFixed(4) + "%";
items[i].style.top = (centerY + radius * Math.sin(angle)).toFixed(4) + "%";

变成这样

const radiusX = 75;
const radiusY = 15;

items[i].style.left = (centerX - radiusX * Math.cos(angle)).toFixed(4) + "%";
items[i].style.top = (centerY + radiusY * Math.sin(angle)).toFixed(4) + "%";

const items = document.querySelectorAll('.circle a');

const centerX = 80;
const centerY = 50;
const radiusX = 75;
const radiusY = 15;
let startAngle = 0;
let endAngle = 2 * Math.PI;

function render() {
  for(var i = 0, len = items.length; i < len; i++) {
    const zeroToOne = i / len;  // goes from zero to one
    const angle = lerp(startAngle, endAngle, zeroToOne);
  
    items[i].style.left = (centerX - radiusX * Math.cos(angle)).toFixed(4) + "%";
    items[i].style.top = (centerY + radiusY * Math.sin(angle)).toFixed(4) + "%";
  }
}
render();

function lerp(start, end, zeroToOne) {
   return start + (end - start) * zeroToOne;
}

document.querySelector('#start').addEventListener('input', function(e) {
  const zeroToOne = e.target.value / e.target.max;
  startAngle = lerp(0, Math.PI * 2, zeroToOne);
  render();
});

document.querySelector('#end').addEventListener('input', function(e) {
  const zeroToOne = e.target.value / e.target.max;
  endAngle = lerp(0, Math.PI * 2, zeroToOne);
  render();
});

.circle {
  width: 250px;
  height: 250px;
  opacity: 100%;
  
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.open.circle {
   opacity: 1;

   -webkit-transform: scale(1);
   -moz-transform: scale(1);
    transform: scale(1);
 }

.circle a {
  text-decoration: none;
  color: black;
  display: block;
  min-width: 1em;

  position: absolute;
  text-align: center;

}

.circle a:hover {
  color: #eef;
}

<label>start:</label><input type="range" min="0" max="100" value="0" id="start">
<label>end:</label><input type="range" min="0" max="100" value="100" id="end">
<nav class="circular-menu">

<div class="circle">
  <a href="" class="fa fa-home fa-2x">*</a>
  <a href="" class="fa fa-facebook fa-2x">*</a>
  <a href="" class="fa fa-twitter fa-2x">*</a>
  <a href="" class="fa fa-linkedin fa-2x">*</a>
  <a href="" class="fa fa-github fa-2x">*</a>
  <a href="" class="fa fa-rss fa-2x">*</a>
  <a href="" class="fa fa-pinterest fa-2x">*</a>
  <a href="" class="fa fa-asterisk fa-2x">*</a>
</div>

<a href="" class="menu-button fa fa-bars fa-2x"></a>

</nav>

javascript 数学函数：现在它形成一个圆，我需要做一个半圆

javascript math function: Right now it forms a circle, I need to make a semi-circle

javascript

math

geometry

trigonometry