IE9 raphael動畫問題

我在IE9中顯示正確的javascript有問題。其他瀏覽器（Firefox，Opera，Chrome，Safari）運行良好，但IE中的動畫並不流暢。例如看到這條線可以從左到右拖動（鏈接在帖子的末尾）。IE9 raphael動畫問題

javascript代碼：

var w = 1250; 
var h = 650; 

var drawing = Raphael("obrazek",w,h);             

var Ax = 50 
var Ay = 50 
var Ey = 500 

var w = 1250; 
var h = 650; 

var drawing = Raphael("obrazek",w,h);             

var Ax = 50 
var  function onDragMove(dx,dz) { 
    this.onDragUpdate(dx - (this.deltax || 0), dz - (this.deltaz || 0)); 
    this.deltax = dx; 
    this.deltaz = dz; 
} 
function onDragStart() { this.deltax = this.deltaz = 0; } 

function onDragStop() { this.onDragStop(); } 


// line 1     
var Ax 
var line = drawing.path([["M",Ax,Ay],["L",Ax,Ey]]).attr({"stroke-width":3}) 
line.drag(onDragMove,onDragStart) 
line.attr({"cursor":"move"}) 
line.onDragUpdate = function(dx,dz) { 

Ax += dx 
line.attr({"path":[["M",Ax,Ay],["L",Ax,Ey]]}) 

}

和相應的HTML：

<html> 
    <head> 
     <script src="raphael.js"></script> 
    </head> 
    <body> 
     <div id="obrazek"> 
      <script src="ietest.js"></script> 
     </div> 
    </body>     
</html>

或在這裏看到IE9的問題，它與Chrome的比較：提前

http://mech.fsv.cvut.cz/~stransky/ietest/ietest.html

謝謝尋求幫助。

來源

2012-07-12 user1520592

您的頁面缺少doctype，因此呈現爲怪癖模式。 IE9在怪異模式下使用VML而不是SVG，這可能導致渲染速度變慢。只需添加這對您的HTML的第一行：

<!DOCTYPE html>

然而，你的代碼有一些其他問題：

缺少分號。有一個good explanation它可能是危險的。
變量重新聲明和重新定義。
當處理像mousemove或scroll這樣的快速重複事件時，使用調節來避免重新繪製/重繪毛刺和性能問題是合理的。你可以閱讀更多關於它here。包括來自該網站的插件，並替換爲以下您drag結合：

line.drag($.throttle(30, onDragMove), onDragStart);

事實上，即使這樣做不指定文檔類型可以大大提高渲染性能，但是沒有理由不指定它完全。

來源

2012-07-12 12:27:54 unclenorton

非常感謝！添加DOCTYPE完成了這項工作。 – user1520592 2012-07-12 12:46:06

IE9 raphael動畫問題

回答

相關問題