我有以下问题: 我在div中创建了一个拉斐尔画布。加载页面并调用initRadar()函数后会发生这种情况:
var r;
var paper;
var c;
function initRadar(){
r = $( "#circ" );
paper = Raphael("circ", r.width(), r.height());
c = paper.circle(r.width()/2, r.height()/2, r.height()/2-2);
$(window).on("orientationchange",function(){
//redraw(); // <--- the way I wanted it
setTimeout(function(){ redraw(); }, 300); // <--- *yuck*
});
}
到目前为止,此功能完美无缺。我的问题在视口方向改变时开始。我想我可以向窗口添加一个事件句柄,当方向改变并重绘内容时,它会触发。它有效......有点儿。我想调用第二个函数:
function redraw(){
c.remove();
c = paper.circle(r.width()/2, r.height()/2, r.height()/2-2);
}
每当方向发生变化时,此功能都会重新绘制内容。这也很有效......差不多。问题是,我有竞争条件。即使方向改变事件被触发,#circ div仍然具有旧的大小和位置。这会产生奇怪的效果,当视口处于纵向模式时,将绘制横向圆,反之亦然。
我目前的解决方案是使用超时功能( yuck ),等待几毫秒,以便在绘制圆圈之前完成布局。它有效,但它很难看,我不希望在我的代码中有这样的黑客攻击。
有人能指出我如何正确解决这个问题吗?