lundi 20 avril 2015

CSS 360° line rotation fail

I am trying to rotate a line with the css transfrom propterty based on the position of the element. (DEMO: http://ift.tt/1yLq9Yc) DESCRIPTION: click on a red circle and then on another to connect them both with each other. Then press the left mouse button and hold it over the container and drag it around. Your will see that the line buggs after a certain angle. I don't know why, here is my code for the rotation:

function lineTo(x1,y1,x2,y2,line){
    var dist = Math.sqrt(Math.pow(x2 - x1,2) + Math.pow(y2 - y1, 2));
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;

    line.style.transform = "rotate("+ angle + "deg)";
    line.style.width = dist+"px";
}

x1/x2/y1/y2 are just the coords of the two points where the line is connected to. line is just a HTML hr element with the following styles:

        .line {
            border: 1px solid #000;
            margin-top: calc(50% - 1px);
            margin-left: calc(50% - 1px);
            width: 0px;
            visibility: hidden;
            position: absolute;
            transform-origin: 0% 0%;
            z-index: -1;
        }

i don't understand why this bug appears, where is the mistake !?

Aucun commentaire:

Enregistrer un commentaire