Вычисление процента с положением мыши с учетом полукруга

Я только что попытался закодировать некоторые трюки на justGage (используя код Raphael JS) для расчета процентов, но я застрял на математической формуле :(.

Вот в чем дело: у меня есть div шириной 400 пикселей, который приветствует 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
person user1713964    schedule 21.01.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Поскольку у вас есть полоса, на которой происходят клики, вы не можете полагаться на координату 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));  
    });
})
person atomman    schedule 21.01.2013
comment
хорошо, я сделал несколько других тестов внутри страницы, и это кажется противоречивым, когда есть другие div. Поэтому я изменил скрипт, чтобы он всегда вычислял pageY и X внутри родительского элемента. - person user1713964; 21.01.2013

arrow_upward
1
arrow_downward

вот черновик расчета: draft

person Community    schedule 21.01.2013
comment
Я измерял углы в градусах. - person ; 21.01.2013