Нахождение точки n% от центра полукруга в Javascript?

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 - массив, содержащий идентификаторы и оценки- значения в процентах равны 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
     });
 }

Я пропустил код для генерации массива углов и рандомизации этого массива - это необходимо только для презентационных целей, чтобы маркеры не перекрывались.

Я также делаю некоторые странные вещи с координатами, прежде чем переместить маркеры (опять же, это было опущено), так как я хочу, чтобы точка находилась в нижнем центре маркера, а не в верхнем левом углу.