在两点之间画线

Question

如果我放

，我无法弄清楚这一点

 addLine( 100,100,activeCircleObj.img.x(),activeCircleObj.img.y() );

一切正常，但如果

addLine( top.replace('px',''),left.replace('px',''),activeCircleObj.img.x(),activeCircleObj.img.y() );

它不起作用。然后在窗户外面上方和左边是如此巨大，但在控制台中它们似乎很正常。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<style>
.circle{
position:absolute;
background-color:red;
height:10px;
width:10px;
border-radius:20px;
}
</style>


<script>

var circleNextID = 0;
var circleClass = '.circle';
var circle = '<div class="circle"> </div>';
var imageID = '#image';
var imageDivID = '#image-div';
var mouse = {x: 0, y: 0};

    function addLine( x1, y1, x2, y2 ){
    var line = '<div class="active-line"></div>';
    var temp;
    console.log( 'top:' + y1 );
    console.log( 'left:' + x2 );
    $( imageDivID ).append( line );
      if (x2 < x1){
        var temp = x1;
        x1 = x2;
        x2 = temp;
        temp = y1;
        y1 = y2;
        y2 = temp;
      }
    var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
    console.log( 'length is ' + length );
    var rotation = Math.atan((y2-y1)/(x2-x1));
    console.log( 'rotation is ' + rotation );

    $('.active-line').css('width', length + 'px')
                     .css('background-color','red')
                     .css('height','5px')
                     .css('position','absolute')
                     .css('top',  y1 + 0.5*length*Math.sin(rotation) + "px" )
                     .css('left',   x1 - 0.5*length*(1 - Math.cos(rotation)) + "px")
                     .css('-webkit-transform','rotate(' + ( rotation ) + 'rad)'); 



}

document.addEventListener('mousemove', function(e)
        {
            mouse.x = e.clientX || e.pageX;
            mouse.y = e.clientY || e.pageY;
            if ( $('.active-circle').length ) 
            {
                var activeCircleObj = new circleObj( imageID, '.active-circle', circleNextID );
                $( '.active-circle' ).css('top', activeCircleObj.img.y() ).css('left', activeCircleObj.img.x() );
                var top = $( '#1').css('top');
            //  var he = $( top ).css('top');
                var left = $( '#1').css('left');
        //      $( '.active-line' ).remove();
            //  $( '.active-line' ).remove();
            //  console.log( 'top:' + top );
            //  console.log( 'left:' + left );
        //      console.log( 'actiove top:' + activeCircleObj.img.y() );
        //      console.log( 'actiove left:' + activeCircleObj.img.x() );
        //      $('#image-div').line(top, left, activeCircleObj.img.y() ,  activeCircleObj.img.x());
                //addLine( 100,100,100,100 );
                addLine( top.replace('px',''),left.replace('px',''),activeCircleObj.img.x(),activeCircleObj.img.y() );
                    console.log( 'top:' + top );
            console.log( 'left:' + left );
            }

        });





function coords( x, y )
{
    var constX = x;
    var constY = y;
    this.setX = function( x ){
        constX = x; 
        return true;
    }
    this.setY = function( y ){
        constY = y; 
        return true;
    }
    this.x = function(){
        if ( constX === undefined )
            return 0;
        else
            return constX;
    }
    this.y = function(){
        if ( constY === undefined )
            return 0;
        else
            return constY;
    }
}

function circleObj( image, classAttr, circleID )
{   
    var id = circleID;
    this.id = function(){
    return id;
    }
    this.mouse = new coords( mouse.x, mouse.y );
    var img = $(image).offset();
    this.img = new coords( this.mouse.x() - img.left, this.mouse.y() - img.top );
    this.zIndex = function(){
        var zIndex = $(image).css('z-index');
        if ( zIndex == 'auto' )
            return 1;
        else 
            return zIndex.replace( 'px', '' ) + 1;
    }
    function getWidth(){
        if ( !( $( classAttr ).length ) )
            return 0;
        else
            return $( classAttr ).css('width').replace('px','');
    }
    function getHeight(){
        if ( !( $( classAttr ).length ) )
            return 0;
        else
            return $( classAttr ).css('height').replace('px','');
    }
    this.circle = new coords( this.img.x() - ( getWidth() / 2 ), this.img.y() - ( getHeight() / 2 ) );


    function setStyle(){

    }
}


</script>

<div id="content">

    <div id="image-div">

        <img src="shapes.jpg" style="position:absolute;height:400px; width:600px;" usemap="#map" id="image">
    <!--        <map name="map" id="map"></map> -->
    </div>

    <!-- <input type="submit" id="new-map" name="New map"> -->


</div>




<script>

function addCircle( imageID, circleClass )
    {
        var activeCircleObj = new circleObj( imageID, circleClass, circleNextID++ );

        var activeCircle = $( imageID )
            .parent('div')
            .append( circle )
            .children(':last-child');
        $( activeCircle ).addClass('active-circle')
                         .attr('id',activeCircleObj.id )
                         .css('top',activeCircleObj.img.y())
                         .css('left',activeCircleObj.img.x())
                         .css('zIndex',activeCircleObj.zIndex());

                //  alert( activeCircleObj.img.x() );
    }

$( imageID ).on('click', function(){
    if ( !( $( circleClass ).length ) )
    {
        var firstCircleObj = new circleObj( imageID, circleClass, circleNextID++ );
        var firstCircle = $( imageID )
            .parent('div')
            .append( circle )
            .children(':last-child');
        $( firstCircle ).addClass('circle')
                        .attr('id',circleNextID++ )
                        .css('top',firstCircleObj.img.y())
                        .css('left',firstCircleObj.img.x())
                        .css('zIndex',firstCircleObj.zIndex());
        addCircle( imageID, circleClass );
    }
});
$( imageDivID ).on('click', '.active-circle', function(){
$(this).removeClass('active-circle');
addCircle( imageID, circleClass );
});
</script>