javascript - 使 IE8 与 EaselJS 和 ExplorerCanvas 兼容-6ren

javascript - 使 IE8 与 EaselJS 和 ExplorerCanvas 兼容

转载作者：行者123 更新时间：2023-11-30 13:14:13

我正在使用 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>

此示例将在 Chrome 和 IE9 中运行，因为会创建和使用 native Canvas 元素。但是在 IE8 中它失败了。

最佳答案

我也遇到过这个问题，试图让 ExCanvas 与 EaselJS 配合得很好。这是我如何让它工作的。希望这有助于解决您的形象问题。

获取 EaselJS 的源代码:https://github.com/gskinner/EaselJS.git .这会将所有 javascript 文件分成各自的部分。
将所有这些文件复制到项目目录中的“easel”文件夹中。
文件的加载顺序很重要，请参阅下文了解如何执行此操作。
EaselJS 有一个选项可以覆盖 createCanvas 方法，这是使用 ExCanvas 所必需的。这发生在加载 SpriteSheet.js 文件之后，并且在加载 Graphics.js、DisplayObject.js、Container.js 等之前。在下面的代码中，我使用 jQuery 加载了 easelJs 需要的其余 js 文件。这一切都发生在 $(document).ready() 函数中。

如果操作正确，您应该会在 IE 中看到一个 700 x 700 的 Canvas ，从左上角到右下角有一条红线(在 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>

关于javascript - 使 IE8 与 EaselJS 和 ExplorerCanvas 兼容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12724404/

文章推荐： javascript - 使用提交表单

文章推荐： javascript - 使文本框只有5的倍数

文章推荐： javascript - 什么! !function(){...}() 的一部分；意思是？

文章推荐： javascript - 缩放 Canvas jsplumb/fabric.js

easeljs - 预加载图像后使用 EaselJS 翻转 SpriteSheet 动画
我正在尝试水平翻转 SpriteSheet 动画中的 Sprite 。我从this example开始我在创建SpriteSheet后立即添加了翻转的帧 var ss = new creat
easeljs - 预加载图像后使用 EaselJS 翻转 SpriteSheet 动画
我正在尝试水平翻转 SpriteSheet 动画中的 Sprite 。我从 this example 开始我在创建 SpriteSheet 后立即添加了翻转帧 var ss = new cr
easeljs - 使用EaselJS在透明矩形上单击事件
是否可以使透明rect可点击？我不想填充它，所以看起来像 shape.graphics.setStrokeStyle(2).beginStroke("#000").rect(0, 0, 1
easeljs - 如何在createjs中使用圆弧绘制圆？
如何在createJS中绘制圆弧。我已经经历过 arcTo 函数，但这不是我想要的。我希望能够绘制几条弧线，这些弧线放在一起时类似于一个圆。例如:我希望能够使用 8 条弧线绘制一个圆。无法使用 Arc
EaselJs - 跨域图像解决方法？
当我尝试使用时: temp = new createjs.Bitmap(obj.path) 我收到错误: Uncaught An error has occurred. This is most li
rotation - EaselJS - 围绕其中心旋转形状
我正在用 EaselJS 制作一个旋转矩形，但它不像我想的那样工作。我认为，如果我想制作一个围绕其中心在 x=100, y=100 位置旋转的正方形 (40x40)，我需要将它的注册点设置为 reg
canvas - EaselJS:单击鼠标更改形状填充颜色
我在使用 EaselJS 时遇到了困难。基本上我想创建一个简单的网格并突出显示所选的实际元素: var stageWidth = 800, stageHeight = 600, cell_
javascript - EaselJS - 舞台鼠标悬停
我最近发现了EaselJS，我正在尝试制作一个非常简单的 Canvas 射击游戏。我的 Canvas 宽度为 500 像素，高度为 500 像素。当用户的鼠标进入 Canvas 时，目标会随着鼠标
javascript - EaselJS 通过基于当前帧的帧进行动画处理
我正在使用 EaselJS SpriteSheets，我想知道如何让我的英雄停止平稳运行，因此，如果 SpriteSheet 正在播放“运行”动画并且位于第 5 帧，我需要通过帧进行动画处理6, 7,
javascript - EaselJS 的碰撞问题
我的形状要么从地板上掉下来，要么消失。我的代码很简单，如果您复制并粘贴，您就可以看到所有内容。无论如何，听到的是代码。我想我可能没有在tick函数中的碰撞中添加一些东西。 var box, gravi
javascript - Easeljs - 优化
EaselJS.js 库有很多我的项目中不需要的函数(我不调用它们)。有没有办法检测这些功能并为每个项目删除它们？我需要尽可能减小文件大小。附注我的easeljs.js是在Adobe Flash C
javascript - EaselJS:为什么缓存会使我的渲染速度变慢？
我正在尝试提高 Canvas 上的性能，因为每个 stage.update() 上都会重新绘制所有内容(多个区域)，这就是它的工作原理。我只想绘制/添加一个区域。我可以让它工作，但是由于更新，所有以前
javascript - EaselJS:更新属性更改时的形状颜色
我正在使用 EaselJS 用 JS 编写一个简单的游戏。我尝试保持一切面向对象，以保持游戏状态、EaselJS 对象状态以及 Canvas 上显示的内容同步。我希望能够通过更改属性来更改 Canva
javascript - 位图逐渐移动到点击(easeljs)
我希望我的位图转到单击位置，但我希望看到 bitmap.x/bitmap.y 和 click.x/click.y 之间的进展我怎样才能制作这个动画？非常感谢最佳答案单击舞台时，您可以使用 Twe
javascript - Easeljs 形状未定义
我需要使用 Shape 对象创建可拖动的随机矩形。此函数在单击鼠标的位置创建新的矩形。 var rects = []; var i=0; var stage; window.onload = func
Javascript - easelJS - 如何删除AllListeners
在代码的开头，我设置了一个刻度事件。以下 3 行有效。 createjs.Ticker.addEventListener("tick", handleTick); createjs.Ticker.us
javascript - Easeljs 中的位图无法与事件监听器一起使用？
我正在尝试在 Canvas 中创建可拖动的背景图像。目前我有这样的东西: var stage = new createjs.Stage("canvas"); createjs.Ticker.addEv
jquery - 位图没有出现在舞台上(easeljs)
所以我正在使用 easeljs，并且我有一堆要回收的图像。由于某种原因，每当我尝试将它们添加到舞台 stage.update() 就不再起作用。 (我使用警报来测试这一点，因此它可能会变得非常慢例如加
javascript - easeljs 添加位图以在不同位置多次上演
我刚开始使用 easeljs 库。我创建了一个带舞台的 Canvas ，它可以正常工作。我想添加位图作为按钮并将它们并排添加到舞台底部。我试过以下方法，但它会将位图放在彼此的顶部。 var but
javascript - EaselJS 没有链接
我刚开始通过在线教程学习 javascript，并从 GitHub 存储库下载文件。文件类型为“easeljs-0.7.1.min”。当我输入下面给出的代码时，它没有显示任何内容在浏览器上。是我下载的

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使 IE8 与 EaselJS 和 ExplorerCanvas 兼容