我试图使用css 3变换旋转功能将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: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);
});
我google了“lookat”函数,发现了类似于lookat矩阵的东西.
解决方法
首先,圆圈的中心未正确计算.你的圆圈是120px宽和高,但你通过将它的顶部和左边设置为scy – 50来“居中”它,你应该使用scy – 60(120px的一半是60px).或者甚至更好,也可以动态地计算半圆的宽度和高度,并减去它,以防你改变主意并再次使它变成不同的大小.
我只是静静地做了：
circle.css('top',scy-60+"px");
circle.css('left',scx-60+"px");
其次,您想要计算.Box元素围绕其中心旋转所需的角度,但您可以使用其顶部和左侧位置来执行此操作.那是不对的.
再一次,动态会更好,但现在让我们做静态：
var angle = calcAngle({x:x + 32,y:y + 32},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)
}
并在返回角度之前实现它：
function calcAngle(p1,p2){
var angle = Math.atan2(p2.y - p1.y,p2.x - p1.x);
return radToDegree(angle);
}
现在,度数从顶部开始,意味着如果角度为0度,它将指向上方,而由于计算的设置方式,您需要它指向右侧.因此,您在最终的旋转计算中添加了90.
如果你的观点开始向上,那就好了,但事实并非如此.它从左下角开始,这是另一个135度.添加它们,你会得到225度的差异.所以：
Box.css('-webkit-transform','rotate('+(angle+225)+'deg)');
瞧,你的剧本有效：http://jsfiddle.net/7ae3kxam/42/
编辑：现在也适用于拖动
