Drawing straight lines in JavaScript
        Posted  
        
            by 
                Shawn31313
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Shawn31313
        
        
        
        Published on 2012-06-21T03:09:45Z
        Indexed on 
            2012/06/21
            3:16 UTC
        
        
        Read the original article
        Hit count: 188
        
I'm just trying to draw a line with JavaScript.
I would like it to be like this: http://deepliquid.com/projects/blog/arrows2.html
My version: http://jsfiddle.net/shawn31313/qsWML/5/show
Doesn't work too well and I don't know how to get it too work. It must be an issue in my JavaScript.
This my code:
$(document).ready(function() {
    var dragStatus = 2,
        getPos, giveRandomID;
    $(document).mousedown(function(event) {
        dragStatus = 0;
        getPos = {
            top: event.clientY,
            left: event.clientX
        };
        giveRandomID = Math.floor(Math.random() * 99999);
    });
    $(document).mousemove(function() {
        var line = $('#line' + giveRandomID);
        if (dragStatus == 0) {
            $('body').append("<div id='line" + giveRandomID + "' style='position:absolute;top:" + getPos.top + "px;left:" + getPos.left + "px;background:black;width:2px;height:5px'></div>");
            dragStatus = 1;
        }
        if (dragStatus == 1) {
            if (event.clientX > getPos.left) {
                line.css({
                    left: getPos.left,
                    width: event.clientX - getPos.left
                });
            } else {
                line.css({
                    left: event.clientX,
                    width: getPos.left - event.clientX
                });
            }
            if (event.clientY > getPos.top) {
                line.css({
                    top: getPos.top - Math.abs((event.clientY - getPos.top) * 2),
                    '-webkit-transform': 'rotate(' + (event.clientY - getPos.top) + 'deg)'
                });
            } else {
                line.css({
                    top: getPos.top + Math.abs((getPos.top - event.clientY) * 2),
                    '-webkit-transform': 'rotate(' + (getPos.top - event.clientY) + 'deg)'
                });
            }
            //for DEG  "-" Top-Math.abs(DEG*2) for Deg "+" Top+(DEG*2)
        }
    });
    $(document).mouseup(function() {
        dragStatus = 2;
    });
});?
Thanks for any help fixing this. Mainly an issue with the math, just don't know how I can fix this.
© Stack Overflow or respective owner