1

嗨，我正在尝试学习如何使用 EaselJS 库，最终与一些 EXTJS 库结合使用，但我无法将所有代码放入 .Js 文件中。我的 js 文件看起来像这样

var democanvas = document.createElement('canvas');
document.body.appendChild(democanvas);
democanvas.height = "400";
democanvas.width = "600";


function init() {
var canvas = document.getElementById("democanvas");
var stage = new createjs.Stage('canvas');
var im = new createjs.Bitmap("dbz.jpg");
 //  im.regX - im.image.width *.2; 
 //  im.regY - im.image.height *.2; 
stage.addChild(im);
stage.update();

im.addEventListener("click", function(){

var seed = new createjs.Bitmap("seed.jpg");
seed.alpha = 0.5;
seed.x = window.event.clientX;
seed.y = window.event.clientY;


stage.addChild(seed);
stage.update();
 }); //end seed evenlistener */

 } //end functin init()

这不起作用，但如果我注释掉整个 document.createElement('canvas') 部分并申请

 <body onLoad="init();">
<canvas id="demoCanvas" width="1000" height="1000">
    alternate content 
</canvas>

到我的 index.html 文件它将开始工作:(我将 .js 包含在 te index html 的 body 标记中

Edit:::::::::::::::::::::: 这是我当前的代码，除非我将画布添加到 html 页面，否则仍然没有显示任何内容:(

window.onload = function (){
var demoCanvas = document.createElement('canvas');
//document.body.appendChild(democanvas);
demoCanvas.height = "400";
demoCanvas.width = "600";
}

var stage;
function init() {
stage = new createjs.Stage("demoCanvas");
var text = new createjs.Text("Hello World", "bold 86px Arial", "#ff7700");

stage.addChild(text);
stage.update();
}

init();
4

4 回答 4

1

另一件事 - 因为您使用的是图像路径，而不是完全加载的图像作为位图源，所以当您更新舞台时，图像可能还没有准备好。您可以在图像上放置 onload 处理程序以更新舞台，或先预加载它们。

var image = new Image();
image.onload = handleLoad;
image.src = "src.jpg";

function handleLoad(event) { stage.update(); }

// You can also use the Bitmap
var bitmap = new createjs.Bitmap("src.jpg");
bitmap.image.onload = handleLoad;

您还可以勾选阶段以不断更新它。这是查看问题是否存在的快速方法。

createjs.Ticker.addEventListener("tick", stage);
// OR
createjs.Ticker.on("tick", stage);
于 2013-07-18T13:58:45.477 回答
0

首先，您需要在任何问题之前使用导航器的控制台来查看 javascript 的错误。

你会看到这个错误：Uncaught TypeError: Cannot call method 'appendChild' of null

那是因为您加载了 document.body.appendChild(democanvas); 在加载 html 之前，因此您的 document.body 为空。

这是这样的：

function init() {
    var democanvas = document.createElement('canvas');
    document.body.appendChild(democanvas);
    democanvas.height = "400";
    democanvas.width = "600";

    var canvas = document.getElementById("democanvas");
    var stage = new createjs.Stage('canvas');
    var im = new createjs.Bitmap("dbz.jpg");
    //  im.regX - im.image.width *.2; 
    //  im.regY - im.image.height *.2; 
    stage.addChild(im);
    stage.update();

    im.addEventListener("click", function(){

    var seed = new createjs.Bitmap("seed.jpg");
    seed.alpha = 0.5;
    seed.x = window.event.clientX;
    seed.y = window.event.clientY;

    stage.addChild(seed);
    stage.update();
    }); //end seed evenlistener */

 } //end functin init()
于 2013-07-17T16:54:12.920 回答
0

试试下面的：

document.body.onload = function(){

var democanvas = document.createElement('canvas');
document.body.appendChild(democanvas);
democanvas.height = "400";
democanvas.width = "600";


function init() {
  var canvas = document.getElementById("democanvas");
  var stage = new createjs.Stage('canvas');
  var im = new createjs.Bitmap("dbz.jpg");
   //  im.regX - im.image.width *.2; 
   //  im.regY - im.image.height *.2; 
  stage.addChild(im);
  stage.update();

  im.addEventListener("click", function(){

  var seed = new createjs.Bitmap("seed.jpg");
  seed.alpha = 0.5;
  seed.x = window.event.clientX;
  seed.y = window.event.clientY;


  stage.addChild(seed);
  stage.update();
   }); //end seed evenlistener */

 } //end functin init()

 init();
}
于 2013-07-17T16:35:38.197 回答
0

我有同样的问题，我通过使用预加载器解决了它。您可以像这样使用 PreloadJS 预加载器：

    var preloader = new createjs.LoadQueue(true);
    preloader.addEventListener("complete",this.handleComplete.bind(this));

    var manifest = [

        {src:"./images/yourIMAGE.PNG"},
        //another image

    ];
于 2013-10-16T08:12:33.513 回答