如何在Jquery中查找一行的中間點？

Question

我有60px寬的對角線，它跟在鼠標光標後面。但我想把我的原點指向中間或線條。不在線的角落。我怎樣才能做到這一點？

我試圖給一個left:-30px行，但它不起作用。

現在我的路線是;

我嘗試做的是

​​

var originX = $('#origin-point').offset().left + $('#origin-point').outerWidth()/2; 
    var originY = $('#origin-point').offset().top + $('#origin-point').outerHeight()/2; 

    var length = Math.sqrt((event.pageX - originX) * (event.pageX - originX) 
     + (event.pageY - originY) * (event.pageY - originY)); 

    var angle = 180/3.1415 * Math.acos((event.pageY - originY)/length); 
    if(event.pageX > originX) 
     angle *= -1; 

我的jsfiddle是here。

Answer 1

我修復了一些優化代碼。

首先更新您的座標轉換爲這樣的：

#new-link-line { 
    -webkit-transform-origin: top center; 
    -moz-transform-origin: top center; 
    -o-transform-origin: top center; 
    -ms-transform-origin: top center; 
    transform-origin: top center; 
} 

其次，更新這樣的linkline left CSS位置：

.css('left', offset.left + $(this).outerHeight()/2 - ($linkLine.width()/2)); 

這會達到預期的效果。

更新的jsfiddle：http://jsfiddle.net/25E8W/416/

全部更新JS：

// Store this now so you don't have to search DOM for it every time you do mousemove 
var $op = $('#origin-point'); 

$op.mousedown(function() { 
    var $linkLine = $('<div id="new-link-line"></div>').appendTo('body'); 
    var offset = $op.offset(); 
    $linkLine 
     .css('top', offset.top + $(this).outerWidth()/2) 
     .css('left', offset.left + $(this).outerHeight()/2 - ($linkLine.width()/2)); 

    $(document) 
     .mousemove(linkMouseMoveEvent) 
     .bind('mousedown.link', function(event) { 
      if(event.which == 3) { 
       endLinkMode(); 
      } 
     }) 
     .bind('keydown.link', function(event) { 
      // ESCAPE key pressed 
      if(event.keyCode == 27) { 
       endLinkMode(); 
      } 
     }); 
}); 
function linkMouseMoveEvent(event) { 
    var offset = $op.offset(); 
    if ($('#new-link-line').length > 0) { 
     var originX = offset.left + $op.outerWidth()/2; 
     var originY = offset.top + $op.outerHeight()/2; 

     var length = Math.sqrt(
      (event.pageX - originX) * (event.pageX - originX) + 
      (event.pageY - originY) * (event.pageY - originY) 
     ); 

     var angle = 180/3.1415 * Math.acos((event.pageY - originY)/length); 
     if (event.pageX > originX) 
      angle *= -1; 

     $('#new-link-line') 
      .css('height', length) 
      .css('-webkit-transform', 'rotate(' + angle + 'deg)') 
      .css('-moz-transform', 'rotate(' + angle + 'deg)') 
      .css('-o-transform', 'rotate(' + angle + 'deg)') 
      .css('-ms-transform', 'rotate(' + angle + 'deg)') 
      .css('transform', 'rotate(' + angle + 'deg)'); 
    } 
} 

function endLinkMode() { 
    $('#new-link-line').remove(); 
    $(document).unbind('mousemove.link').unbind('click.link').unbind('keydown.link'); 
} 

Answer 2

先改變linkLine的變換原點像這樣：CSS

#new-link-line { 
    -webkit-transform-origin: top center; 
    -moz-transform-origin: top center; 
    -o-transform-origin: top center; 
    -ms-transform-origin: top center; 
    transform-origin: top center; 
} 

然後通過減去該線的寬度的一半結合線的按鈕中心的中間位置：JS

$('#origin-point').mousedown(function() { 
    var linkLine = $('<div id="new-link-line"></div>').appendTo('body'); 
    var halfLineWidth = linkLine.width()/2; // half of line-width 
    linkLine 
    .css('top', $('#origin-point').offset().top + $('#origin-point').outerWidth()/2) 
    .css('left', $('#origin-point').offset().left + $('#origin-point').outerHeight()/2 - halfLineWidth); // substract half the line-width 

/* rest of code */ 

}); 

JS引用JS中的小提琴。這裏完全展示太多了。

工作DEMO。