IE9拉斐爾動畫問題

Question

我在IE9中顯示正確的JavaScript時遇到問題。 其他瀏覽器（Firefox，Opera，Chrome，Safari）運行良好，但IE中的動畫不流暢。 例如，請參見可以從左向右拖動的這一行（帖子末尾的鏈接）。

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

在此先感謝您的幫助。

Answer 1

您的頁面缺少doctype，因此它以怪癖模式呈現。 IE9在怪癖模式下使用VML而不是SVG，這可能會導致渲染速度變慢。 只需將其添加到html的第一行即可：

<!DOCTYPE html>

但是，您的代碼還有其他一些問題：

缺少分號。 有一個很好的解釋，說明它可能有多危險。
變量重新聲明和重新定義。
當處理快速重復的事件（例如，鼠標移動或滾動）時，合理的做法是使用調節以避免重繪/重繪毛刺和性能問題。 您可以在此處了解更多信息。 包括該站點中的插件，並用以下內容替換您的drag綁定：

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

實際上，即使不指定doctype而執行此操作也可以大大提高渲染性能，但沒有理由不完全指定它。

IE9拉斐爾動畫問題

問題描述

1 個解決方案

解決方案1
0 已采納 2012-07-12 12:27:54

IE9拉斐爾動畫問題

問題描述

1 個解決方案

解決方案1 0 已采納 2012-07-12 12:27:54

解決方案1
0 已采納 2012-07-12 12:27:54