easeljs不显示位图 [英] easeljs not showing bitmap
本文介绍了easeljs不显示位图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的画架js功能，它绘制了一个红色圆圈和一个图像，但圆圈正在显示，但图像不是。
function Start（）{
var stage = new createjs.Stage（DogeCanvas）;
var dog = new createjs.Bitmap（doge.jpg）;
var circle = new createjs.Shape（）;
circle.graphics.beginFill（red）。drawCircle（0，0，50）;
circle.x = 100;
circle.y = 100;
dog.x = 100;
dog.y = 100;
stage.addChild（circle，dog）;
stage.update（）;
}
这是html文件
<！DOCTYPE html>
< html>
< head>
< title> test< / title>
< script src =http://code.createjs.com/easeljs-0.7.0.min.js>< / script>
< script src =Doge.js>< / script>
< / head>
< body bgcolor =＃C7C7C7onload =Start（）;>
< canvas id =DogeCanvaswidth =480height =320>< / canvas>
< / body>
< / html>
为什么？请帮助，看起来像在其他人的代码这个作品，但为什么这不适合我？ 解决方案
图像可能尚未加载。
- 您可以在舞台上添加一个Ticker来不断更新它（大多数应用程序都这样做，因为还有其他的东西会随着时间而变化） / li>
示例：
createjs。 Ticker.on（tick，stage）;
// OR
createjs.Ticker.addEventListener（tick，stage）;
// OR
createjs.Ticker.on（tick，tick）;
函数tick（event）{
//其他的东西
stage.update（event）;
}
- 监听图片的
onload，然后再次更新舞台
示例：
var bmp = new createjs.Bitmap（path / to / image.jpg） ;
bmp.image.onload = function（）{
stage.update（）;
}
- 在将图像绘制到舞台之前，使用PreloadJS之类的图像预加载图像。这对于拥有更多资产的大型应用来说是更好的解决方案。
- You can add a Ticker to the stage to constantly update it (which most applications do, since there is other things changing over time)
- Listen for the
onloadof the image, and update the stage again - Preload the image with something like PreloadJS before you draw it to the stage. This is a better solution for a larger app with more assets.
var queue = new createjs.LoadQueue（）;
queue.on（complete，function（event）{
var image = queue.getResult（image）;
var bmp = new createjs.Bitmap（image）;
//用位图
}做的东西;）;
queue.loadFile（{src：path / to / img.jpg，id：image}）;
This is my easel js function, it draws a red circle and an image, however the circle is showing but the image isn't.
function Start() {
var stage = new createjs.Stage("DogeCanvas");
var dog = new createjs.Bitmap("doge.jpg");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
dog.x=100;
dog.y=100;
stage.addChild(circle, dog);
stage.update();
}
And this is the html file
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="Doge.js"></script>
</head>
<body bgcolor="#C7C7C7" onload="Start();">
<canvas id="DogeCanvas" width="480" height="320"></canvas>
</body>
</html>
Why? help please, seems like in everyones else code this works but why this isn't working for me?
解决方案
The image is likely not loaded yet.
Example:
createjs.Ticker.on("tick", stage);
// OR
createjs.Ticker.addEventListener("tick", stage);
// OR
createjs.Ticker.on("tick", tick);
function tick(event) {
// Other stuff
stage.update(event);
}
Example:
var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.image.onload = function() {
stage.update();
}
Example:
var queue = new createjs.LoadQueue();
queue.on("complete", function(event) {
var image = queue.getResult("image");
var bmp = new createjs.Bitmap(image);
// Do stuff with bitmap
});
queue.loadFile({src:"path/to/img.jpg", id:"image"});
这篇关于easeljs不显示位图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
