Question

我试图制作跟随鼠标光标的点。这一切都在起作用，但是当我旋转它时它全部搞砸了，因为边界框已经改变了。

我用的是： http://en.wikipedia.org/wiki/Rotation （这就是为什么我最初否定了y，而不是再次否定了新的价值） enter image description here

我需要读取该点距中心的距离及其角度（但与初始＆＃34; 0＆＃34;旋转状态有关）

我必须根据角度为rPX添加一些内容，但我不知道如何计算它。有人可以联系吗？内部div仅用于创建坐标系中心。 https://jsfiddle.net/jre86rdd/14/

var currentMousePosition = {
    x:0,
    y:0
}

var angle = Math.PI/6

document.addEventListener("mousemove",function(event){
    currentMousePosition.x = event.clientX;
    currentMousePosition.y = event.clientY;
    applyMovement(event)
})

function applyMovement(event){
    var rPX = event.clientX - getElementOffSetFromParentLeft(document.getElementById("light").parentNode) - 5;
    var rPY = -(event.clientY - getElementOffSetFromParentTop(document.getElementById("light").parentNode) - 5);
    var XinCircle = rPX*Math.cos(angle)-rPY*Math.sin(angle)
    var YinCircle = rPX*Math.sin(angle)+rPY*Math.cos(angle)

    if(XinCircle > -70 && XinCircle < 70)
    document.getElementById("light").style.left = XinCircle + "px";
    if(rPY > -70 && rPY < 70)
    document.getElementById("light").style.top = -YinCircle + "px";
    //console.log(rPX + " X " + XinCircle )
    //console.log(rPY + " Y " + YinCircle )
}

var getElementOffSetFromParentLeft = function (htmlElement) {
        var parentRect = htmlElement.parentNode.getBoundingClientRect(),
            bodyRect = document.body.getBoundingClientRect();
        console.log(parentRect.left)
        //I need to add something here, it's 75 for 30, i have no idea how i have calculated it
       return parentRect.left - bodyRect.left + 75;
}
var getElementOffSetFromParentTop = function (htmlElement) {
        var parentRect = htmlElement.parentNode.getBoundingClientRect(),
            bodyRect = document.body.getBoundingClientRect();
        return parentRect.top - bodyRect.top;
}

Answer 1

对于鼠标移动，它是使用jQuery的非常简化的代码：

$('.wrapper, .outer').mousemove(function(e){ 
$('#light').css('left', e.pageX);
$('#light').css('top', e.pageY);
});

https://jsfiddle.net/jre86rdd/30/

告诉我这是不是你想要的。

编辑：你还需要在包装类之外移动light div，因为它会受到CSS的影响

Answer 2

根据您的新评论，这是我的答案：

HTML：

<div class="wrapper">
 <div class="outer">
     <div class="inner">
        </div>
    </div>
</div>
<div class="dot" id="light"></div>

JS：

var timeout;
var down = false;
var inside = 0; //Not a boolean because .outer can trigger false when .wrapper is true

$(document).mousedown(function() {
    down = true;
}).mouseup(function() {
    down = false;  
}).mouseleave(function() {
    down = false;  
});

$('.wrapper, .outer').mouseenter(function(){
    inside++;
}).mouseleave(function() {
    inside--;
});

$('#light').mousedown(function () {
    var x, y;
    timeout = setInterval(function () {
        if(down){   
            $(document).mousemove(function(event) {
                x = event.pageX;
                y = event.pageY;
            });           
            if (inside > 0){
                $('#light').css('left', x - 5);
                $('#light').css('top', y - 5);
            }
         }
         else
        {
             clearTimeout(timeout);
        }
    }, 20);
});

https://jsfiddle.net/jre86rdd/124/

可旋转div上的可拖动点，在dragend

2 个答案: