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
    });
}

然后你可以根据自己的需要绘制points。

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
     });
 }

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

在移动标记之前，我也使用坐标做了一些奇怪的事情（再次，这已被省略），因为我希望点位于标记的底部中心而不是左上角。 / p>

在Javascript中找到距离半圆中心n％的点？

2 个答案: