計算用鼠標位置的百分比考慮半圈

我只是試圖代碼放在justGage一些技巧（使用拉斐爾JS代碼）來計算百分比，但我卡上的數學公式:(計算用鼠標位置的百分比考慮半圈

這裏的點：我有一個寬度爲400px的div，歡迎使用justGage 我想用鼠標點擊填充它，例如，點擊半圈右下角會填充它，就好像填充了100％一樣。問題是我試圖抓住鼠標位置並使用它來刷新量具，但是僅在X軸上工作並不遵循圓形形狀

這裏是我的基本計算：

var parentOffset = $(this).offset(); 
    var relX = e.pageX - parentOffset.left; 
    g1.refresh(Math.round((relX)/4));

而且整個測試代碼fiddle。

有誰知道一個公式要真正遵循圓形？

來源

2013-01-21 user1713964

既然你有一個條哪些點擊發生，你不能依靠X座標來決定百分比。我能想到的最佳選擇是使用三角法計算點擊與圓心之間的角度，然後用此公式將其擬合到0-100範圍內（(angel/Math.PI)*100）。

下面是一個代碼snipplet爲我工作。

$(function(){ 
    $("#g1 path").click(function(e){ 
     var parent = $(this).parent(); 
     var height = parent.height(); 
     var width = parent.width(); 
     var center = {'x': width/2, 'y':(height-60)}; 
     var angle = Math.atan2(-(e.pageY - center['y']), center['x'] - e.pageX); 
     g1.refresh(Math.round((angle/Math.PI)*100)); 
    }); 
})

來源

2013-01-21 10:56:25 atomman

哇！這工作得很好！非常感謝！ – user1713964

好吧，我做了一些頁面內的其他測試，似乎有其他div的衝突。所以我修改了腳本，使其始終計算父元素中的pageY和X. – user1713964

這裏是一個關於計算草案： draft

來源

2013-01-21 11:09:12

我用度來度量角度。 – 2013-01-21 11:11:25

計算用鼠標位置的百分比考慮半圈

回答

相關問題