EaselJS 및 ExplorerCanvas와 IE8 호환성 얻기

저는 EaselJS를 사용하고 있으며 ExplorerCanvas와의 하위 호환성을 허용하려고합니다. EaselJS 및 ExplorerCanvas와 IE8 호환성 얻기

이

은 ( 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

프로젝트 페이지 example에 규정 된 바와 같이 원래 캔버스 소스에 대한 참조를함으로써 준 canvas 요소를 인스턴스화해야

: 나는 다음에 와서

추가 조사 후 :

<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가 핵심 개체를 초기화하고 클래스가 먼저 캔버스 요소의 존재를 검색하기 전에 두 번째. IE < 9 캔버스를 구현하지 않았으므로 easeljs 핵심 그래픽 API를 인스턴스화 할 수 없다는 것은 명백합니다. 나는 이것이 당신의 코드가 작동하지 않는 두 가지 주요 이유라고 생각한다.

제 제안은 easeljs없이 코드를 다시 작성하는 것입니다. 나는 easeljs없이 어떻게 할 수 있는지 보여주기 위해 필요한 수정을 한 바이올린을 만들었다 : http://jsfiddle.net/xdXrw/. easeljs를 사용하는 것이 절대적으로 필요한지 모르겠지만 IE8 해킹 캔버스와 관련해서는 몇 가지 한계가 있습니다.

출처

2012-10-04 12:26:58

내가 그러나 내가 easeljs이 컨텍스트를 연결하는 방법에 부착하고, excanvas를 사용하여 컨텍스트를 얻을 수 있어요. 이 작업을 수행하는 방법에 대한 아이디어가 있습니까? –

내 대답을 업데이트했습니다! –

ExCanvas를 EaselJS와 함께 사용하면 좋겠다. 여기 내가 어떻게 작동하는지 알아 보자. 희망이 당신의 이미지 문제와 도움이됩니다.

EaselJS에 대한 소스 코드를 얻으십시오. https://github.com/gskinner/EaselJS.git. 이렇게하면 모든 javascript 파일이 고유 한 부분으로 분리됩니다.
모든 파일을 프로젝트 디렉토리의 "easel"폴더로 복사하십시오.
파일이로드되는 순서는 중요하므로 수행 방법은 아래를 참조하십시오.
EaselJS에는 createCanvas 메서드를 재정의하는 옵션이 있습니다.이 메서드는 ExCanvas와 함께 사용해야합니다.이것은 SpriteSheet.js 파일을로드하고 Graphics.js, DisplayObject.js, Container.js 등을로드하기 전에 발생합니다. 아래 코드에서 jelery를 사용하여 easelJs가 필요로하는 나머지 js 파일을로드했습니다. 이 모든 것은 $ (document) .ready() 함수에서 발생합니다.

제대로 실행되면 Internet Explorer에서 왼쪽 상단에서 하단 오른쪽까지 빨간 선이있는 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에서 모든 기능을 보존합니까? –

저는 그것을 철저히 테스트하지 않았기 때문에 그것이 안정적인지 아닌지 말할 수는 없습니다. 나는 다른 대안을 찾을 수 없습니다. –

EaselJS 및 ExplorerCanvas와 IE8 호환성 얻기

답변

관련 문제