javascript - 在 Javascript 中找到圆与直线的交点

Question

我正在尝试为给定元素设置动画以围绕预定义的半径移动，但无法获取该元素在给定 Y 点处的位置。

我试图用圆方程找到每个点，但我只能从两个可能的点中得到一个点。

在 Javascript 中，我使用 Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2) 来理解这一点。假设圆的中心是 0,0。但随后我需要将其转换为屏幕上的像素，因为浏览器上的位置没有负像素。

所有尺寸都是相对于窗口的。例如，在我的测试中，半径是窗口高度的 80%。

此外，我正在尝试计算在持续时间内每帧之间的元素距离应该是多少，但我还没有使用它，因为我尝试首先解决上述问题。

这就是我所拥有的(清理版本):

let height = window.innerHeight * 0.8,
    radius = height / 2,
    circumferance = (radius * 2) * Math.PI,
    container = document.getElementById('container'),
    rotating = document.querySelector('.rotating'),
    centerX = radius - (rotating.offsetWidth / 2),
    centerY = radius - (rotating.offsetHeight / 2),
    duration = 10,
        stepDistance = circumferance / 16;

// Setting the dimensions of the container element.
container.style.height = height + 'px';
container.style.width = height + 'px';

// return positive X of any given Y.
function getXOffset(y) {
    return Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2);
}

// Setting the position of the rotating element to the start.
rotating.style.top = 0 + 'px';
rotating.style.left = centerX + 'px';

setInterval(() => {
  let top = parseInt(rotating.style.top),
        y = radius - top;

    rotating.style.top = (top + 1) + 'px';
    rotating.style.left = (centerX + getXOffset(y)) + 'px';
}, 16);

这是一个带有更多代码的 fiddle ，用于尝试获得点之间的正确距离以获得更平滑的动画(当前需要修复，但它还没有打扰我。) https://jsfiddle.net/shock/1qcfvr4y/

最后一点:我知道可能还有其他方法可以使用 CSS 来实现此目的，但出于学习目的，我选择使用 javascript。

Answer 1

Math.sqrt只会返回正根。您必须根据应用程序考虑负值。在这种情况下，您需要正值 x在周期的第一个半周期为负值，在第二个半周期为负值。为此，您应该实现一种方法来跟踪进度并相应地反转符号。

Here is a sample 。我根据你的修改了。

编辑:

而不是 Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2)您可以使用完整的公式得到 x如果您不想假设原点为中心，在本例中为 Math.sqrt( Math.pow(radius, 2) - Math.pow((actualY - centerY), 2) , 2)

说明:

原方程(x-a)² + (y'-b)² = r²变成x = √(r² - (y'-b)²) + a

Assuming .rotating box have 0 width and height.

代码中的变量等效项是 centerX =a , centerY =b 。通过假设原点为中心，您基本上是在进行预先计算，以便您的 y值等于 (y'-b) 。因此x = √(r² - y²) + a有效。

At initial state top = 0

即(y'-b) => height - centerY 。在你的代码中y =radius => height/2 。现在(height - centerY)等于(height/2)是圆被方形容器约束的副作用，其高度决定 y值。

换句话说，当您使用原点作为中心时，您将在圆方程之外获取中心偏移并单独处理它。您可以使用整个公式来做同样的事情，即 x = √(r² - (y'-b)²) + a