javascript - 使用鼠标移动沿斜线移动坐标

Question

请运行下面的代码片段 - 您将看到一条从盒子的 Angular 派生的斜线。鉴于鼠标移动，我想沿着这条线移动标记 - 其中:

• x 方向的运动将沿直线移动，y 方向的额外运动将加速
• x 方向的移动将沿着直线移动，您可以从头到尾使用它(最简单的)

到目前为止，我还没有任何进展，但如果有进展，我会进行更新，非常感谢您的帮助。

如果 PS 没有准确地沿着直线移动，PS 并不重要 - 它是沿着我感兴趣的 Angular 移动的算法。

fiddle :http://jsfiddle.net/ngr3dbhx/3/

var boxEl = document.getElementById('box');
var lineEl = document.getElementById('line');
var markerEl = document.getElementById('marker');
var rad, deg;

// Draw an angled line for demonstration purposes.
function getElementOffset (el) {
    var rect = el.getBoundingClientRect();
    var docEl = document.documentElement;

    var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
    var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

    return {
        top: rectTop,
        left: rectLeft
    };
}

function calcAndDrawAngle () {
    var boxOffset = getElementOffset(boxEl);

    var x1 = boxOffset.left;
    var y1 = boxOffset.top;

    var x2 = boxOffset.left + boxEl.offsetWidth;
    var y2 = boxOffset.top + boxEl.offsetHeight;

    var deltaX = x2 - x1;
    var deltaY = y2 - y1;

    rad = Math.atan2(deltaY, deltaX);
    deg = rad * (180 / Math.PI);

    lineEl.style.transform = 'rotate(' + deg + 'deg) translate(-50%, 0)';  
}

// On mouse move I want to move the marker along the anged line..
// Do something with rad or deg?
document.addEventListener('mousemove', function (e) {
    markerEl.style.top = e.clientY + 'px';
    markerEl.style.left = e.clientX + 'px';
});

calcAndDrawAngle();
window.addEventListener('resize', calcAndDrawAngle);

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#box {
    position: absolute;
    top: 20%;
    left: 30%;
    width: 35%;
    height: 30%;
    border: 1px solid #999;
}

#line {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    height: 1px;
    width: 9999em;
    background-color: black;
}

#marker {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: red;
}

<div id="box">
    <div id="line"></div>
</div>
<div id="marker"></div>

Answer 1

你是说这个吗？

https://jsfiddle.net/2q1nLh3q/1/

公式是基础数学:

y = k * x + d

其中 k 是 deltaY/deltaX 和 d 是直线穿过 y 轴的点。

所以你的函数看起来像这样:

document.addEventListener('mousemove', function (e) {
    window.requestAnimationFrame(function() {

        var boxOffset = getElementOffset(boxEl);

        var k =  boxEl.offsetHeight / boxEl.offsetWidth;
        var d = boxOffset.top - boxOffset.left * k; 

        var mouseY = k * e.clientX  + d;

        markerEl.style.top = mouseY + 'px';
        markerEl.style.left = e.clientX + 'px';
    });
});