Question

我想将鼠标移动到align，使用div的top，当鼠标移动时，div应该rotate，div的顶部与鼠标对齐。我想使用atan2。它应该看起来像this。

使用Javascript：

$(function() {
    var stick = $(".stick"), sHeight = stick.outerHeight(), 
                sWidth = stick.outerWidth(), atan,
                sTop = stick.offset().top, sLeft = stick.offset().left;

    $(document).on("mousemove", function(e) {
        // console.log(e.pageX, " ", e.pageY)
        atan = Math.atan2(e.pageY - sTop , e.pageX - sLeft ) 
        console.log(atan)
        stick.css({"transform" : "rotate("  + atan +  "rad)"} )
    })
})

的CSS：

.wrapper{
    width: 500px;
    height: 400px;
    position: relative;
    border:1px solid green;
}
.stick{
    width: 3px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: green;
    transform: rotate(90deg);
}

HTML：

<div class="wrapper">
    <div class="stick"></div>
</div>

Answer 1

我制作的作品here。

您似乎没有正确居中 - 您需要考虑div的宽度和容器的中心点

div.$(function(){

    var stick = $(".stick"), sHeight = stick.outerHeight(), 
                sWidth = stick.outerWidth(), atan,
                sTop = stick.offset().top, sLeft = stick.offset().left;
    $(document).on("mousemove", function(e){
        atan = Math.atan2(e.pageY - 200 , e.pageX - 250) + Math.PI/2;
        console.log(atan);

        stick.css({"transform" : "rotate("  + atan + "rad)"} );


    });
});

（我还删除了css中的旋转，并将棒放在中间位置。）

Answer 2

问题是角度计算phi=atan2(y,x)采用“正常”笛卡尔坐标系，其中y轴指向上方。在屏幕坐标中，它指向下方。因此，您应该使用phi=atan2(-y,x)。

但是，确保您应该尝试使用轮换时0deg和90deg报告条指向的位置。使用代码时，旋转中心位于条形图的中间，因此难以确定方向，但似乎0deg指向上方并且角度顺时针应用。因此，对于内部坐标系，其中0°是X轴，Y轴是90°，X = centery-y和Y=x-centerx，因此

angle = atan2(x-centerx, centery-y)

使用atan2（）向div方向旋转div

2 个答案: