在Javascript中找到距離半圓中心n％的點？

我很抱歉地說，數學真的不是我的強項。通常我可以通過，但這讓我完全陷入困境。在Javascript中找到距離半圓中心n％的點？

我試圖在HTML/CSS/Javascript中對測驗結果屏幕進行編碼。

在我的界面上，我有一個半圓（目標的右半球）。

我有一個'分數'的範圍（100的整數 - 所以50,80,90等）。

我需要在半圓上繪製這些點離中心n％，其中n是每個得分的值 - 得分越高，點越接近目標中心。

我知道我的半圓有多寬，並且已經處理了％值的轉換，以便較高的值看起來更靠近中心，而較低的看起來更遠。

我無法包裹頭部的東西是將這些點繪製在從目標的中心點（x = 0，y =目標高度/ 2）出發以一個隨機角度出來的線上（所以點不重疊）。

任何建議感激地收到！

來源

2011-10-12 MassivePenguin

你有沒有想要這個樣子的例子？這聽起來像是要將圓分成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但是你認爲合適的。

來源

2011-10-12 16:24:51 Ben

非常感謝！儘管我沒有使用這種方法，但最終結果幾乎是一樣的......見下文。 – MassivePenguin

多headscratching後，我設法在這個解決方案（與同事誰是多少，在這種事情上已經比我更好的幫助下）到達：

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

我省略的代碼，用於生成角的陣列和隨機化該數組 - 這樣的標記物不重疊的唯一需要的表象的目的。

在我移動標記之前，我還做了一些與座標有關的奇怪事情（同樣，這已被省略），因爲我希望點位於標記的底部中心而不是左上角。

來源

2011-10-13 12:36:03 MassivePenguin

在Javascript中找到距離半圓中心n％的點？

回答

相關問題