开发者

How to convert a point to polar coordinates in ECMAScript?

开发者 https://www.devze.com 2023-03-19 02:11 出处:网络
I need to turn a click location into a polar coordinate. This is my current algorithm. Location is the location on the canvas of the click ({x:evt.clientX, y:evt.clientY}), center is the offset of the

I need to turn a click location into a polar coordinate. This is my current algorithm. Location is the location on the canvas of the click ({x:evt.clientX, y:evt.clientY}), center is the offset of the origin from 0,0. For example, if the circle is centered on 250, 250, center is {x:250, y:250}. Scale is the scale of the radius. For example, if the radius of a circle from 开发者_运维知识库the center would normally be 50 and the scale is .5, the radius becomes 25. (it's for zooming in/out)

this.getPolarLocation = function(location){
    var unscaledFromCenter = {
        x: location.x - center.x,
        y: location.y - center.y
    };
    var angle = this.getAngleOnCircle(unscaledFromCenter);
    var dist = Math.sqrt(unscaledFromCenter.x * unscaledFromCenter.x + unscaledFromCenter.y * unscaledFromCenter.y) * this.ds.scale;
    return {
        angle:angle,
        dist:dist,
        toString: function(){
            return "Theta: ".concat(angle).concat("; dist: ").concat(dist);
        }
    };
}

this.getAngleOnCircle = function(location){
    var x = location.x;
    var y = location.y;
    if(x == 0 && y > 0)
        return Math.PI / 2;
    if(x == 0 && y < 0)
        return 3 * Math.PI / 2;
    if(y == 0 && x > 0)
        return 0;
    if(y == 0 && x < 0)
        return Math.PI;
    var angle = Math.atan(y/x);
    if(x > 0 && y > 0)
        return angle;
    if(x < 0)
        return Math.PI + angle
    return Math.PI * 2 + angle;
}

Screenshots of the issue. The left is what happens zoomed out (and is not supposed to happen). The right is zoomed in (scale >= 1), and is what is supposed to happen.

How to convert a point to polar coordinates in ECMAScript?

I'm under the impression that my center coordinates are being shifted slightly off. It seems to work fine for scale >= 1, but not for scale < 1

Source: circos.html: http://pastie.org/private/cowsjz7mcihy8wtv4u4ag circos.js: http://pastie.org/private/o9w3dwccmimalez9fropa datasource.js: http://pastie.org/private/iko9bqq8eztbfh8xpvnoaw Run in Firefox

So my question is: why doesn't this work?


For some reason, the program automagically works when I close firebug. It doesn't seem to work on Firefox 5, only the version I have (in the 3s somewhere). Either way, I'm scrapping the project for something more object oriented. There's no way the current algorithm could handle a genome. (which is exactly what I'm going to be mapping)

UPDATE:

I figured out the problem... I was measuring the distance from the top left of the page, not the top left of the canvas. Thus, when firebug was enabled, the screen was shifted, making the problems worse. The solution is the use canvas.offsetLeft and canvas.offsetTop to calculate the position on the canvas.

0

精彩评论

暂无评论...
验证码 换一张
取 消