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） i Math.PI中删除2。现在你的代码依赖于我递增以满足L，因此导致2 *（1 / l） i Math.PI的值增加2Pi，从而产生一个圆圈。

如果我们将其增加的能力提高一半，它只能制造半圈。也许我错了，没试过：P

Answer 2

如果你打破了数学，那将更容易理解

$rateID="C:\Folder\Path\RateIDTable.csv"
$date = Import-CSV $rateid | select -first 1 -Property date
$date = $date -replace '[20]',''
write-output $date

这应该让您更清楚，您需要更改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) + "%"; }

首先，我很难看到l vs i所以

angle

然后让我们稍微分析一下数学让我们的返工角度更清晰

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

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

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

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

所以

  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更改为您喜欢的任何内容。

＆＃13;

endAngle

＆＃13;

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();
});

＆＃13;

.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;
}

＆＃13;

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

<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) + "%";

＆＃13;

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) + "%";

＆＃13;

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();
});

＆＃13;

.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;
}

＆＃13;

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

2 个答案: