看过Text之后,再来看看Bitmap,用js的话,graphic估计会用的很少,大多数时候还是用位图的。
html里边自己的image就挺方便的,canvas处理image也挺方便。这里边没有BitmapDate,和as里不一样,为什么没有,可以看看Canvas的API,本身就提供了对于像素级的处理。LufyLegend里边提供了BitmapDate的封装,不知道createjs以后会不会也提供。
不废话了,直接上代码:
//创建stage,参数为canvas的id
var stage=new createjs.Stage("gameMain");
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
function tick(event){
stage.update();//需要tick,然后自己update,才能刷新显示。
//stage.tick();//官方API说:A stage is the root level Container for a display list. Each time its tick method is called, it will render its display list to its target canvas.我居然信了,试了试不对,看源码也不是调用tick就能刷新显示。不知道是不是因为我英文太差理解错了。
//console.log(stage.mouseX);//mouseX属性还是一直有值的,不错。
}
//创建一个bitmap
//可以是地址,image,canvas元素或者字符串(应该是类似base64的图片字符串),svg暂时不研究.最好不要跨域
//1
//var base64Img="data:image/png;base64,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";
//var bmp=new createjs.Bitmap(base64Img);
//2
/*
var img=new Image();
img.src="logo.png";
var bmp=new createjs.Bitmap(img);
*/
//3
var bmp=new createjs.Bitmap("logo.png");
//设置显示元件的位置
bmp.x=10;
bmp.y=10;
//添加到显示列表
stage.addChild(bmp);
创建Bitmap时,可以传入图片的地址、字符串(比如Base64编码的图片字符串)、Image对象、或者Canvas对象(忘记应该是canvas还是canvas的content了,也懒得试了),一般还是传入Image对象的时候多,先预加载,加载完了创建时直接传入image对象。
其实我最关心的还是怎么Draw,怎么直接处理图片的某个通道,后者某些像素,等等BitmapData里边的方法。
Bitmap里边的Draw方法没有研究,这个估计比较难,涉及的方面也比较多。以后再看,现在先能显示一张位图,就OK了。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。