计算用鼠标位置的百分比考虑半圈

我只是试图代码放在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

计算用鼠标位置的百分比考虑半圈

回答

相关问题