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

【问题标题】：Calculating a percentage with mouse position considering half-circle考虑半圆计算鼠标位置的百分比
【发布时间】：2013-01-21 10:05:34
【问题描述】：

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

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

这是我的基本计算：

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

以及整个代码测试fiddle。

有人知道真正遵循圆形的公式吗？

【问题讨论】：

标签： javascript raphael graphael justgage

【解决方案1】：

这是关于计算的草稿：

【讨论】：

我以度为单位测量角度。

【解决方案2】：

由于您有一个 strip 发生点击，因此您不能依靠 x 坐标来确定百分比。我能想到的最佳选择是使用三角函数来计算点击和圆心之间的角度，然后通过这个等式将其拟合到您的 0-100 范围内 ((angel/Math.PI)*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));  
    });
})

【讨论】：

好的，我在一个页面内做了一些其他测试，当有其他 div 结束时，它似乎冲突。所以我修改了脚本，让它总是在父元素内计算 pageY 和 X。