调整Raphael画布的方向更改

时间:2015-01-23 15:38:24

标签: javascript jquery canvas raphael

我有以下问题: 我在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 ),等待几毫秒,以便在绘制圆圈之前完成布局。它有效,但它很难看,我不希望在我的代码中有这样的黑客攻击。

有人能指出我如何正确解决这个问题吗?

0 个答案:

没有答案