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

Question

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

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

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

PS 如果它没有完全沿着直线移动并不重要 - 它是沿着我感兴趣的角度移动的算法。

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';
    });
});

Answer 2

使用相当简单的数学运算，计算有限范围内任意 x 的 y（减去 4 以将矩形置于中心）：

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

// 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;

    coords = [{x:x1,y:y2},{x:x2,y:y1}];
    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) {
    var x = Math.min(Math.max(e.clientX, coords[0].x), coords[1].x) - 4;
    var y = coords[0].y + ((coords[1].y - coords[0].y) * (coords[1].x - x) / (coords[1].x - coords[0].x));
    markerEl.style.top = y + 'px';
    markerEl.style.left = x + '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>

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

Move a coordinate along an angled line using mouse movement

javascript

math

angle

coordinates

mousemove