如何实现三角形沿圆周旋转并始终指向鼠标？

原代码中mouseXRelative和mouseYRelative的计算逻辑无数学依据，导致传入三角函数的角度值完全混乱，这是顶点异常旋转的核心原因。要实现底边两点固定在圆边缘、三角形始终指向鼠标的效果，需基于鼠标相对于圆心的方向角来计算顶点位置，具体修正方案如下：

核心实现思路 #

• 先计算圆心到鼠标位置的方向角（弧度制）
• 设定三角形底边的张角（可根据视觉需求调整）
• 基于方向角±张角，计算圆边缘上的两个底边顶点坐标
• 用这两个顶点和鼠标位置绘制三角形

修正后的代码 #

// 圆心坐标与圆半径（根据你的场景调整，原代码中半径为25）
const centerX = x;
const centerY = y;
const radius = 25;

// 计算鼠标相对于圆心的方向角（弧度）
const dx = mouseX - centerX;
const dy = mouseY - centerY;
const theta = Math.atan2(dy, dx);

// 三角形底边的张角（示例为30度，可自行调整大小）
const deltaAngle = radians(30);

// 计算圆边缘上的两个底边顶点
const cEdgeXL = centerX + radius * Math.cos(theta + deltaAngle);
const cEdgeYL = centerY + radius * Math.sin(theta + deltaAngle);
const cEdgeXR = centerX + radius * Math.cos(theta - deltaAngle);
const cEdgeYR = centerY + radius * Math.sin(theta - deltaAngle);

// 绘制指向鼠标的三角形
stroke(0, 0, 0);
triangle(cEdgeXL, cEdgeYL, mouseX, mouseY, cEdgeXR, cEdgeYR);

关键细节说明 #

• Math.atan2(dy, dx)：自动处理正负象限，准确计算从圆心指向鼠标的方向角，避免手动计算角度的错误
• deltaAngle：控制三角形底边的宽度，值越大三角形越宽，建议在20°-45°范围内调整
• 两个底边顶点通过theta ± deltaAngle计算，确保它们始终对称分布在鼠标方向的两侧，完美贴合圆边缘且三角形指向始终正确

内容的提问来源于stack exchange，提问作者Drew Magro