jquery - 设置 css 旋转以将元素指向一个点

Question

我正在尝试使用 css 3 transform rotate 函数将 div 旋转到一个点。

我走到这一步:jsfiddle link

$(document).ready(function(){
    var scw,sch,scx,scy;
    calcCenter();
    $(window).resize(function() {         
        calcCenter();
    });
    function calcCenter(){
      sch = $(window).height(); 
      scw = $(window).width(); 
      scx = scw/2;
      scy = sch/2;
        $(".circle").remove();
      var circle = $("<span></span>").addClass('circle').text('.');
      circle.css('top',scy-50+"px");
      circle.css('left',scx-50+"px");
    $(document.body).append(circle);
    }
    function calcAngle(p1,p2){

        var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
        return angle;
    }



    $(document).click(function(e){  
        var box = $("<span></span>").addClass('box');
        var x = e.pageX,y=e.pageY; 
        box.css('top',y+"px");
        box.css('left',x+"px"); 

        $(document.body).append(box);
        var angle = calcAngle({x:x,y:y},{x:scx,y:scy});

        box.css('-webkit-transform','rotate('+(90+angle)*-1+'deg)');        

        box.draggable({
                drag: function(e) {
                        var box = $(this);
                        var x = e.pageX,y=e.pageY; 
                        box.css('top',y+"px");
                        box.css('left',x+"px");
                        var angle = calcAngle({x:x,y:y},{x:scx,y:scy});

                        box.css('-webkit-transform','rotate('+(90+angle)*-1+'deg)');


                        }
                      });
    });

    var sunAngle = 1;
    setInterval(function(){
        var sun = $("span.circle")[0];
        $(sun).css('-webkit-transform','rotate('+sunAngle+'deg)');
        sunAngle = (sunAngle+1) %360;           
    },100);
});

我用谷歌搜索了“lookat”函数，只找到了类似 lookat matrix 的东西。

Answer 1

首先，您的圆心计算不正确。您的圆圈的宽度和高度均为 120 像素，但您通过将其顶部和左侧设置为 scy - 50 来“居中”，您应该在此处使用 scy - 60(一半120 像素为 60 像素)。或者甚至更好，还可以动态计算半圆的宽度和高度并减去它，以防您改变主意并再次将其设置为不同的尺寸。

我只是静态地做了:

circle.css('top',scy-60+"px");
circle.css('left',scx-60+"px");

其次，您想要计算 .box 元素需要围绕其中心旋转的 Angular ，但是您使用它的顶部和左侧位置来这样做。这是不正确的。

同样，动态的会更好，但现在让我们做静态的:

var angle = calcAngle({x:x + 32,y:y + 32},{x:scx,y:scy});

然后我不确定你在用 atan2() * 180/Math.PI 做什么，因为 atan2 返回 rads 而你想要度数我仔细检查两者之间如何计算。事实证明，事情并没有你想的那么简单。 See this answer .

所以我添加了一个函数:

function radToDegree(rad) {
    return (rad > 0 ? rad : (2*Math.PI + rad)) * 360 / (2*Math.PI)
}

并在返回 Angular 之前实现它:

function calcAngle(p1,p2){      
    var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
    return radToDegree(angle);
}

现在，度数从顶部开始，这意味着如果 Angular 为 0 度，它将指向上方，而由于您的计算设置方式，您需要将其指向右侧。因此，您将 + 90 添加到最终的旋转计算中。

如果您的点开始向上，那会很好，但事实并非如此。它从左下方开始，又是 135 度。将这些加起来，你会得到 225 度的差异。所以:

box.css('-webkit-transform','rotate('+(angle+225)+'deg)');  

瞧，你的脚本有效:http://jsfiddle.net/7ae3kxam/42/

编辑:现在也适用于拖动