Question

我正在尝试从圆心计算新坐标。所以我已经搜索并得到了这样的公式：

x = r cos(ϴ)
y = r sin(ϴ)

我的代码有效，但结果不符合我的预期

function process()
{
    //
    var x = parseInt(document.getElementById('myx').value);
    var y = parseInt(document.getElementById('myy').value);
    var radius = parseInt(document.getElementById('radius').value);

    var mytext =  document.getElementById('result');

    for( var i=0;i<360;i+=45){
        var new_x = x + radius*Math.cos(toDegrees(i));
        var new_y = y + radius*Math.sin(toDegrees(i));

        mytext.innerHTML += " radius = "+radius+" , angle="+i+"<br/>";
        mytext.innerHTML += " old ("+x+", "+y+") ";
        mytext.innerHTML += " | ("+new_x+", "+new_y+") <br/><br/>";
    }
}

function toDegrees (angle) {
    return angle * 180 / Math.PI;
}

function toRadians (angle) {
    return angle * Math.PI / 180;
}

结果：result

90度的

应为：（0，-50）

公式错了吗？

Answer 1

Math.cos()将弧度作为参数（see MDN），但您使用度数。使用代码中已有的toRadians(angle)方法：

var new_x = x + radius*Math.cos(toRadius(i));
var new_y = y + radius*Math.sin(toRadius(i));

编辑：它不会返回0（感谢数字PI表示这样一个无理数），但3.061616997868383e-15为X坐标值，为90度。嗯，e事，科学地代表x10^。因此，3.061616997868383e-15只是3.061616997868383 x 10^-15，非常小。要准确查看0，请查看number methods并选择最适合的精度（例如，3.061616997868383e-15.toFixed(4)会产生0.0000）

Answer 2

就像Vahdet在答案中说的那样，Math.cos()需要弧度而不是度数。

您可以简化代码并使用户输入而不是循环使用固定值，除了更简单之外它应该更有用。

＆＃13;

let angleContainer = document.getElementById('angle');
let radiusContainer = document.getElementById('radius');

let x = document.getElementById('x');
let y = document.getElementById('y');

angleContainer.addEventListener('input', () => {
    updateDom(
        parseInt(angleContainer.value),
        parseInt(radiusContainer.value),
        x, y)
});

radiusContainer.addEventListener('input', () => {
    updateDom(
        parseInt(angleContainer.value),
        parseInt(radiusContainer.value),
        x, y)
});

function updateDom(angle, radius, x, y) {
    x.innerText = radius * Math.cos(toRadians(angle));
    y.innerText = radius * Math.sin(toRadians(angle));
}

function toRadians(angle) {
    return angle * Math.PI / 180;
}

updateDom(
    parseInt(angleContainer.value),
    parseInt(radiusContainer.value),
    x, y);

＆＃13;

#calculator {
    background: #00816A;
    padding: 2em;
}

#calculator > h1 {
    font-size: 1em;
}

#radius-input, #angle-input {
    padding-top: 0.5em;
}

#x-container, #y-container {
    font-size: 1.2em;
    margin: 0.5em 0;
    font-weight: bold;
}

#x, #y {
    font-weight: normal;
}

＆＃13;

<div id="calculator">

    <h1>Coordinates calculator</h1>

    <div id="radius-input">
        <label for="radius">Radius:</label>
        <input id="radius" type="number" value="1">
    </div>

    <div id="angle-input">
        <label for="angle">Angle (deg):</label>
        <input type="number" id="angle" value="45">
    </div>

    <div id="outputs">
        <div id="x-container">X: <span id="x"></span></div>
        <div id="y-container">Y: <span id="y"></span></div>
    </div>
</div>

＆＃13;

在圆周上绘制坐标

2 个答案: