我正在尝试使用 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 的东西。
最佳答案
首先,您的圆心计算不正确。您的圆圈的宽度和高度均为 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/
编辑:现在也适用于拖动
关于jquery - 设置 css 旋转以将元素指向一个点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26034105/