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

Question

我只是尝试在justGage上编写一些技巧（使用Raphael JS代码）来计算百分比，但我坚持使用数学公式:(。

以下是重点： 我有一个400px宽的div，欢迎svg justGage。 我想在点击鼠标后填充它。例如，单击半圆的右下角将填充它，就好像它是100％填充。单击左下角，将其填入0％。 问题是我尝试捕捉鼠标位置并使用它来刷新Gage，但仅在X轴上工作不遵循圆形。

这是我的基本计算：

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

整个代码测试fiddle。

有没有人知道一个真正遵循圆形的公式？

Answer 1

这是关于计算的草稿：

Answer 2

由于您有点击发生的 strip ，因此您不能依赖x坐标来决定百分比。我能想到的最佳选择是使用三角法计算咔嗒声与圆心之间的角度，然后通过此等式（(angel/Math.PI)*100）将其拟合到0-100范围内。

下面是一个适合我的代码片段。

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