23
2015
01

(五)createjs-Bitmap

看过Text之后,再来看看Bitmap,用js的话,graphic估计会用的很少,大多数时候还是用位图的。

html里边自己的image就挺方便的,canvas处理image也挺方便。这里边没有BitmapDate,和as里不一样,为什么没有,可以看看Canvas的API,本身就提供了对于像素级的处理。LufyLegend里边提供了BitmapDate的封装,不知道createjs以后会不会也提供。

不废话了,直接上代码:

  1. //创建stage,参数为canvas的id

  2.  var stage=new createjs.Stage("gameMain");

  3. createjs.Ticker.setFPS(60);

  4. createjs.Ticker.addEventListener("tick", tick);

  5. function tick(event){

  6.                 stage.update();//需要tick,然后自己update,才能刷新显示。

  7. //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就能刷新显示。不知道是不是因为我英文太差理解错了。

  8. //console.log(stage.mouseX);//mouseX属性还是一直有值的,不错。

  9.             }


  10.  //创建一个bitmap

  11. //可以是地址,image,canvas元素或者字符串(应该是类似base64的图片字符串),svg暂时不研究.最好不要跨域

  12. //1

  13.     //var base64Img="data:image/png;base64,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";

  14.     //var bmp=new createjs.Bitmap(base64Img);

  15. //2

  16. /*

  17. var img=new Image();

  18. img.src="logo.png";

  19. var bmp=new createjs.Bitmap(img);

  20. */

  21. //3

  22. var bmp=new createjs.Bitmap("logo.png");

  23. //设置显示元件的位置

  24. bmp.x=10;

  25. bmp.y=10;

  26. //添加到显示列表

  27. stage.addChild(bmp);

创建Bitmap时,可以传入图片的地址、字符串(比如Base64编码的图片字符串)、Image对象、或者Canvas对象(忘记应该是canvas还是canvas的content了,也懒得试了),一般还是传入Image对象的时候多,先预加载,加载完了创建时直接传入image对象。

其实我最关心的还是怎么Draw,怎么直接处理图片的某个通道,后者某些像素,等等BitmapData里边的方法。

Bitmap里边的Draw方法没有研究,这个估计比较难,涉及的方面也比较多。以后再看,现在先能显示一张位图,就OK了。


点击查看实例

« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。