javascript - EaselJS および ExplorerCanvas と IE8 の互換性を取得する

Question

私は EaselJS を使用しており、ExplorerCanvas との下位互換性を確保したいと考えています。

これは、次のコードを使用して可能にする必要があります (こちらを参照)。

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>

この例は、ネイティブキャンバス要素が作成および使用されるため、Chrome および IE9 で実行されます。ただし、IE8 では失敗します。

score 3 · Accepted Answer

私もこの問題に遭遇し、ExCanvasがEaselJSとうまく連携できるようにしようとしました。これが私がそれを機能させた方法です。これが画像の問題に役立つことを願っています。

EaselJSのソースコードを取得します：https ：//github.com/gskinner/EaselJS.git 。これにより、すべてのjavascriptファイルが独自の部分に分割されます。
これらのファイルをすべて、プロジェクトディレクトリの「easel」フォルダにコピーします。
ファイルがロードされる順序は重要なので、その方法については以下を参照してください。
EaselJSには、ExCanvasを使用するために必要なcreateCanvasメソッドをオーバーライドするオプションがあります。これは、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>

score 0 · Accepted Answer

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 が最初にコアオブジェクトとクラスを初期化する前の 2 番目は、canvas 要素の存在を検索することです。IE < 9 はキャンバスを実装していないため、easeljs コアグラフィックス API をインスタンス化できないことは明らかです。これらが、コードが機能しない 2 つの主な理由だと思います。

私の提案は、easeljs なしでコードを作り直すことです。easeljs なしでどのように実行できるかを示すために、必要な変更を加えてフィドルを作成しました: http://jsfiddle.net/xdXrw/。easeljs を使用することが絶対に必要かどうかはわかりませんが、IE8 のハッキングされたキャンバスに関しては、確かにいくつかの制限があります。

javascript - EaselJS および ExplorerCanvas と IE8 の互換性を取得する

2 に答える 2

Related

Reference