javascript - 使用 `Math.PI` 如何在每个元素中设置我自己的 Angular 值？

Question

如何为元素设置值(度)数组？

每个元素都需要从数组中获取值并进行相应的排列。对我来说这不起作用。谁能告诉我正确的方法吗？

示例代码:

var items = 4;
var values = [0,15,30,45] //first should be 0, next 15deg like so..
for(var i = 0; i < items; i++) {
    var num = i;
    var x = 75 - 12 + 87 * Math.cos(values[i]);
    var y = 75 - 12 + 87 * Math.sin(values[i]); 

    $("#center").append("<div class='point' style='left:"+ x +"px;top:"+ y +"px'></div>");   
}

在某些时候，如果我需要设置 360 个元素，那么应该根据数组值进行排列。

Live demo

Answer 1

传递给 Math.sin 和 Math.cos 的 Angular 必须以弧度为单位，而不是度数。

要转换为弧度，只需将 Angular 乘以 Math.PI/180。

var values = [0,15,30,45];
for(var i = 0; i < values.length; i++) {
  $(document.createElement('div')).css({
    left: 75 - 12 + 87 * Math.cos(values[i] * Math.PI / 180),
    top: 75 - 12 + 87 * Math.sin(values[i] * Math.PI / 180)
  }).addClass('point').appendTo("#center");    
}

.point {
  position: absolute;
  border: 5px solid;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center"></div>