1

我只是尝试在 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));

和整个代码测试小提琴。

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

4

2 回答 2

1

这是关于计算的草稿： 草案

于 2013-01-21T11:09:12.153 回答
0

由于您有一个点击发生的条带，因此您不能依靠 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));  
    });
})
于 2013-01-21T10:56:25.770 回答