获取IE8与EaselJS和ExplorerCanvas的兼容性 [英] Getting IE8 compatibility with EaselJS and ExplorerCanvas
本文介绍了获取IE8与EaselJS和ExplorerCanvas的兼容性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用EaselJS，并希望允许与ExplorerCanvas向后兼容。
I am using EaselJS and want to allow for backwards compatibility with ExplorerCanvas.
这应该可以使用下面的代码（参见此处）：
This should be possible using the following code (see here):
createjs.createCanvas = function () { ... return canvas implementation here ... }
如果我在此函数中发出警告并运行代码，则函数将永不运行。
However, If I put an alert in this function and run the code, the function is never run.
如何让此工作？
编辑：
这是我使用的代码的简化示例：
Here is a simplified example of the code I am using:
<!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它失败。
This example will run in Chrome and IE9 as a native canvas element is created and used. However in IE8 it fails.
推荐答案
我遇到了这个问题，试图让ExCanvas玩EaselJS漂亮。这是我如何使它工作。希望这有助于解决图片问题。
I ran across this issue as well, trying to get ExCanvas to play nice with EaselJS. Here is how I got it working. Hope this helps with your image issue.
- 获取EaselJS的源代码： https://github.com/gskinner/EaselJS.git 。
- 将所有这些文件复制到项目目录中的easel文件夹。
- 文件加载的顺序很重要，因此请参阅下面的内容。
- EaselJS有一个选项来覆盖createCanvas方法，这是使用ExCanvas所必需的。这发生在加载SpriteSheet.js文件之后，在加载Graphics.js，DisplayObject.js，Container.js等之前。在下面的代码中，我使用jQuery加载了easelJ所需的其余js文件。
-
如果操作正确，您应该看到一个700 x 700的画布，上面有一条红线从左上到下（在8中测试）。
- Get the source code for EaselJS : https://github.com/gskinner/EaselJS.git. This will get all the javascript files separated out into their own parts.
- Copy all those files over to a "easel" folder in your project directory.
- The order in which the files are loaded is important, so see below on how to do it.
- EaselJS has an option to override the createCanvas method, which is required to use ExCanvas with it. This happens after loading the SpriteSheet.js file, and BEFORE loading Graphics.js, DisplayObject.js, Container.js, etc. In the code below, I used jQuery to load the rest of the js files that easelJs needed. This all happens in the $(document).ready() function.
If done correctly, you should see a 700 x 700 canvas with a red line from top left to bottom right in IE (tested in 8).
head>
<!--
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>
这篇关于获取IE8与EaselJS和ExplorerCanvas的兼容性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
