0

正如您在附加的 GIF 中看到的那样，白点以圆形路径移动。

如何让它沿着六边形的轨迹移动。换句话说，让点遵循六边形路径？

我正在使用以下代码旋转白点：

const angle = Math.PI / 6 * delta; // delta is the current time to increment the angle.
const radius = 300;
const x = center.x + Math.cos(angle) * radius;
const y = center.y + Math.sin(angle) * radius;

白点在圆形路径中移动

谢谢你

4

1 回答 1

2

有多种方法可以做到这一点。如果要保持围绕六边形中心的恒定角旋转速度，则可以根据旋转角度修改移动物体的半径。

首先选择六边形顶点对应的半径。在此示例中，我使用 90 像素的半径。内半径（与六边形边相切的内切圆）是 sqrt(0.75) 乘以这个值：

    r_outer = 90.0
    r_inner = r_outer * Math.sqrt(0.75)

如果零角对应于六边形一侧的中部，则通过简单的几何形状，沿该侧的半径将等于从-30°到+30°r_inner / Math.cos(theta)的变化。theta您可以使用浮点模数运算符将角度限制在 0 到 60° 的范围内。为了使半径计算的角度保持在 ±30° 以内，只需在计算模数之前将角度加上 30°，然后再减去。

所以完整的计算看起来像这样：

    r0 = 90.0              (Outer radius)
    r1 = r0 * sqrt(0.75)   (Inner radius)
    d30 = 30 * pi/180      (30 degrees in radians)
    d60 = 60 * pi/180      (60 degrees in radians)
    r = r1 / cos((theta + d30) % d60 - d30)
    x = x_center + sin(theta) * r
    y = y_center - cos(theta) * r

这是一个工作示例：

let theta=0.0;
let r0 = 90.0; // Outer radius
let r1 = r0 * Math.sqrt(0.75); // Inner radius
let d30 = 30 * Math.PI/180; // 30 degrees in radians
let d60 = 60 * Math.PI/180; // 60 degrees in radians

function move_dot() {
    theta += 0.025;
    let r = r1 / Math.cos((theta + d30) % d60 - d30);
    let x = Math.sin(theta) * r;
    let y = -Math.cos(theta) * r;
    document.getElementById('dot').style.cx=x.toFixed(2)+'px';
    document.getElementById('dot').style.cy=y.toFixed(2)+'px';
}

document.body.onload=function(){setInterval(move_dot,30);}
#hex { fill:none; stroke:#aaf; stroke-width:1; }
#dot { fill:#000; stroke:none; cx:90px; cy:0px; }
<svg width="200" height="200" viewBox="-100 -100 200 200">
<path id="hex" d="M45-77.94 90 0 45 77.94-45 77.94-90 0-45-77.94Z"/>
<circle id="dot" cx="90" cy="0" r="5"/>
</svg>

于 2021-03-04T01:12:54.273 回答