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>

使用鼠标移动沿着成角度的线移动坐标

2 个答案: