Question

我不希望下面代码中的div.stick根据操纵杆的中心旋转。现在它看起来旋转原点位于中心我希望旋转原点位于底部。当鼠标移动时以及当鼠标与棒的顶部对齐时，棒应该旋转。它应该看起来像this（旋转原点位于底部）

使用Javascript：

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

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


       })

HTML：

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

CSS：

.wrapper{
    width: 500px;
    height: 400px;
    position: relative;
    border:1px solid green;
}
.stick{
    width: 3px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 25%;
    background: green;
}

Answer 1

最重要的部分是重置旋转中心。添加到CSS .stick

transform-origin: 50% 100%;

以底部中间为旋转中心。现在您需要使角度计算相对于这个新中心。添加新变量

var sRotMidX = sLeft+sWidth/2, sRotMidY=sTop+sHeight;

并将角度计算更改为

atan = Math.atan2(e.pageY - sRotMidY , e.pageX - sRotMidX) + Math.PI/2;

或者没有相同数量的多个来源，以及9：1分割的中心：

var fmidX =.5, fmidY=.9;
stick.css({"transform-origin" : (100*fmidX)+"% "+(100*fmidY)+"%"});
var sRotMidX = sLeft+sWidth*fmidX, sRotMidY=sTop+sHeight*fmidY;

如何使用atan2（）

1 个答案: