獲取IE8與EaselJS和ExplorerCanvas的兼容性

我正在使用EaselJS並希望允許與ExplorerCanvas向後兼容。獲取IE8與EaselJS和ExplorerCanvas的兼容性

這應該使用下面的代碼（見here）是可能的：

createjs.createCanvas = function() { ... return canvas implementation here ... }

但是，如果我在這個函數把警報和運行代碼，功能永遠不會運行。

我該如何解決這個問題？

編輯：

這裏是我使用的代碼的一個簡化的例子：

<!DOCTYPE html> 
<html lang='en'> 
<head> 
    <meta charset='utf-8' /> 
    <script src='/Scripts/jquery-1.7.1.js'></script> 
    <script src="/Scripts/excanvas/excanvas.compiled.js"></script> 
    <script src="/Scripts/easeljs/lib/easeljs-0.5.0.min.js"></script> 
    <script src='/Scripts/core/jquery.mousewheel.js'></script> 
    <style> 
     canvas 
     { 
      border: 1px solid #ccc; 
     } 
    </style> 
    <script type='text/javascript'> 
     $(document).ready(function() { 
      // Variables 
      var img; 
      var stage; 
      var bmp; 

      // Bindings 
      $('#load').click(function() { initialize() }); // DELETE 

      // Functions 

      function initialize() { 
       img = new Image(); 
       img.onload = imageLoadedEvent; 
       img.src = '/Scripts/viewer/June.jpg'; 
      } 

      function imageLoadedEvent() { 
       var canvasElement = generateContext('testCanvas', 400, 400); 

       stage = new createjs.Stage('testCanvas'); 
       bmp = new createjs.Bitmap(img); 

       stage.autoClear = true; 
       stage.addChild(bmp); 
       stage.update(); 
      } 

      function generateContext(canvasID, width, height) { 
       var canvasElement = document.createElement('canvas'); 

       if (typeof (G_vmlCanvasManager) != 'undefined') 
        canvasElement = G_vmlCanvasManager.initElement(canvasElement); 

       canvasElement.setAttribute("width", width); 
       canvasElement.setAttribute("height", height); 
       canvasElement.setAttribute("id", canvasID); 

       document.getElementById('viewer').appendChild(canvasElement); 
      } 
     }); 
    </script> 
</head> 
<body> 
    <div id='viewer'> 
     <button id='load'>load</button> 
    </div> 

</body> 
</html>

這個例子將在瀏覽器和IE9運行作爲本地畫布元件被創建並使用。但是在IE8中它失敗了。

來源

2012-10-04 Peter Smith

您應該實例通過使參考帆布面料源的準canvas元素提供的項目頁面example上：

<head> 
<!--[if lt IE 9]><script src="excanvas.js"></script><![endif]--> 
</head> 

var el = document.createElement('canvas'); 
G_vmlCanvasManager.initElement(el); 
var ctx = el.getContext('2d');

編輯：

在進一步調查之後我來到了以下結論！有不能夠像包括到畫布多種原因：

1日有可能是在不能夠模仿天然畫布功能excanvas代碼中的錯誤。我使用更成功的修改後的sancha代碼，您可以在這裏獲得：http://dev.sencha.com/playpen/tm/excanvas-patch/excanvas-modified.js。在此處看到實時示例：http://jsfiddle.net/aDHKm/（在IE上嘗試）。
Easeljs首先初始化核心對象和類，然後搜索canvas元素的存在。因爲IE < 9沒有實現畫布，所以很顯然，easeljs核心圖形API不能被實例化。我認爲這是你的代碼無法工作的兩個主要原因。

我的建議是嘗試在沒有easeljs的情況下重新編寫代碼。我做了必要的修改，以向您展示如何不使用easeljs來完成：http://jsfiddle.net/xdXrw/。我不知道使用easeljs是否絕對是必要的，但肯定它在IE8被黑的canvas上有一些限制。

來源

2012-10-04 12:26:58

我能夠使用excanvas，以獲得上下文，但我堅持就如何這種情況下與easeljs關聯。任何想法如何做到這一點？ –

我已更新我的答案！ –

我也遇到過這個問題，試圖讓ExCanvas和EaselJS一起玩。這是我如何運作的。希望這有助於您的圖片問題。

獲取EaselJS的源代碼：https://github.com/gskinner/EaselJS.git。這將會把所有的javascript文件分離出來，放到他們自己的部分。
將所有這些文件複製到項目目錄中的「畫架」文件夾中。
加載文件的順序很重要，所以請參閱下面的操作步驟。
EaselJS有一個選項來覆蓋createCanvas方法，該方法使用ExCanvas時需要它。這發生在加載SpriteSheet.js文件之後，並且在加載Graphics.js，DisplayObject.js，Container.js等之前發生。在下面的代碼中，我使用jQuery加載了easelJs需要的其餘js文件。這一切都發生在$（document）.ready（）函數中。

如果操作正確，您應該在IE中看到一個700 x 700的畫布，從左上角到右下角的紅線（在8中進行測試）。

頭>

 <!-- 
      Load ExCanvas first, and jquery 
     --> 
     <script type='text/javascript' src='./javascript/excanvas.js'></script> 
     <script type='text/javascript' src='./javascript/jquery-1.8.2.min.js'></script> 

     <!-- 
      Have to load Easel js files in a certain order, and override the createCanvas 
      function in order for it to work in < IE9. 
     --> 
     <script type='text/javascript' src='./javascript/easel/UID.js'></script> 
     <script type='text/javascript' src='./javascript/easel/Ticker.js'></script> 
     <script type='text/javascript' src='./javascript/easel/EventDispatcher.js'></script> 
     <script type='text/javascript' src='./javascript/easel/MouseEvent.js'></script> 
     <script type='text/javascript' src='./javascript/easel/Matrix2D.js'></script> 
     <script type='text/javascript' src='./javascript/easel/Point.js'></script> 
     <script type='text/javascript' src='./javascript/easel/Rectangle.js'></script> 
     <script type='text/javascript' src='./javascript/easel/Shadow.js'></script> 
     <script type='text/javascript' src='./javascript/easel/SpriteSheet.js'></script> 

     <script type='text/javascript'> 
      var canvas, stage; 

      createjs.createCanvas = function() { return getCanvas(); }; 

      function getCanvas() { 
       // This is needed, otherwise it will keep adding canvases, but it only use the last one it creates. 
       canvas = document.getElementById("myCanvas"); 
       if (canvas != null) { 
        document.getElementById("container").removeChild(canvas); 
       } 
       canvas = document.createElement("canvas"); 
       document.getElementById("container").appendChild(canvas); 
       if (typeof (G_vmlCanvasManager) != 'undefined') { 
        canvas = G_vmlCanvasManager.initElement(canvas); 
        canvas.setAttribute("height", "700"); 
        canvas.setAttribute("width", "700"); 
        canvas.setAttribute("style", "height:700px; width:700px;"); 
        canvas.setAttribute("id", "myCanvas"); 
       } 
       return canvas; 
      } 
     </script> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       loadOtherScripts(); 
       stage = new createjs.Stage(canvas); 

       // Draw a red line from top left to bottom right 
       var line = new createjs.Shape(); 
       line.graphics.clear(); 
       line.graphics.setStrokeStyle(2); 
       line.graphics.beginStroke("#FF0000"); 
       line.graphics.moveTo(0, 0); 
       line.graphics.lineTo(700, 700); 
       stage.addChild(line); 

       stage.update(); 
      }); 

      function loadOtherScripts() { 
       var jsAr = new Array(13); 

       jsAr[0] = './javascript/easel/Graphics.js'; 
       jsAr[1] = './javascript/easel/DisplayObject.js'; 
       jsAr[2] = './javascript/easel/Container.js'; 
       jsAr[3] = './javascript/easel/Stage.js'; 
       jsAr[4] = './javascript/easel/Bitmap.js'; 
       jsAr[5] = './javascript/easel/BitmapAnimation.js'; 
       jsAr[6] = './javascript/easel/Shape.js'; 
       jsAr[7] = './javascript/easel/Text.js'; 
       jsAr[8] = './javascript/easel/SpriteSheetUtils.js'; 
       jsAr[9] = './javascript/easel/SpriteSheetBuilder.js'; 
       jsAr[10] = './javascript/easel/DOMElement.js'; 
       jsAr[11] = './javascript/easel/Filter.js'; 
       jsAr[12] = './javascript/easel/Touch.js'; 

       for (var i = 0; i < jsAr.length; i++) { 
        var js = jsAr[i]; 
        $.ajax({ 
         async: false, 
         type: "GET", 
         url: js, 
         data: null, 
         dataType: 'script' 
        }); 
       } 
      } 
    </head> 
    <body> 
     <div id="container"></div> 
    </body> 
</html>

來源

2012-11-20 17:29:39

我想知道這個黑客有多穩定？它保留了IE8的全部功能嗎？ –

我還沒有徹底測試過，所以我不能說它是否穩定。儘管如此，我找不到其他的選擇。 –

獲取IE8與EaselJS和ExplorerCanvas的兼容性

回答

相關問題