在 JavaScript 中找到距离半圆中心 n% 的点？

Question

我很遗憾地说数学确实不是我的强项。正常情况下我还能过得去，但这件事让我完全难住了。

我正在尝试用 HTML/CSS/Javascript 编写测验结果屏幕。

在我的界面上，我有一个半圆（目标的右半球）。

我有一系列“分数”（100 以内的整数 - 50、80、90 等）。

我需要将这些点绘制在距离中心 n% 的半圆上，其中 n 是每个分数的值 - 分数越高，该点就越接近目标中心。

我知道我的半圆有多宽，并且已经处理了％值的转换，以便较高的半圆看起来更靠近中心，而较低的半圆看起来更远。

我无法理解的是，将这些点绘制在一条从目标中心点（x = 0，y = 目标高度/2）以随机角度延伸的线上（因此这些点不会重叠） ）。

如有任何建议，我们将不胜感激！

Answer 1

您有一个示例来说明您希望它是什么样子吗？听起来您想将圆分成 N 片，其中 N 是您需要显示的点数，然后沿每个半径绘制点。因此，您可能会看到类似的内容：

编辑：代码围绕原点旋转，而不是指定的圆

var scores = [];
//...
//assume scores is an array of distances from the center of the circle
var points = [];
var interval = 2 * Math.PI / N;
var angle;
for (var i = 0; i < N; i++) {
    angle = interval * i;
    //assume (cx, cy) are the coordinates of the center of your circle
    points.push({
        x: scores[i] * Math.cos(angle) + cx,
        y: scores[i] * Math.sin(angle) + cy
    });
}

然后您可以根据您认为合适的方式绘制点。

Answer 2

经过一番绞尽脑汁后，我终于找到了这个解决方案（在一位同事的帮助下，他在这方面比我做得更好）：（

arr_result 是一个包含 ID 和分数的数组 - 分数是 100 的百分比）

for (var i = 0; i < arr_result.length; i++){

     var angle = angleArray[i]; // this is an array of angles (randomised) - points around the edge of the semicircle

     var radius = 150; // width of the semicircle

     var deadZone = 25 // to make matters complicated, the circle has a 'dead zone' in the centre which we want to discount
     var maxScore = 100
     var score = parseInt(arr_result[i]['score'], 10)

     var alpha = angle * Math.PI
     var distance = (maxScore-score)/maxScore*(radius-deadZone) + deadZone
     var x = distance * Math.sin(alpha)
     var y = radius + distance * Math.cos(alpha)

     $('#marker_' + arr_result[i]['id'], templateCode).css({ // target a specific marker and move it using jQuery
         'left' : pointX,
         'top': pointY
     });
 }

我'我们省略了用于生成角度数组并随机化该数组的代码 - 这仅用于演示目的，因此标记不会重叠。

在移动标记之前，我还对坐标做了一些奇怪的事情（同样，这已被省略），因为我希望该点位于标记的底部中心而不是左上角。