如何在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

首先像这样更改linkLine的transform-origin： 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。

Answer 2

我修改了一些代码以进行优化。

首先更新您的变换坐标：

#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;
}

其次，更新您的链接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');
}