createjs初学-BitmapText使用实例

来源：互联网发布：战地1淘宝美版25块钱编辑：程序博客网时间：2024/05/19 04:02

BitmapText就是用SpriteSheet中定义的图片来显示相应的文字，构造函数如下

BitmapText ([text=""] [spriteSheet=null] )

有两个参数，都是可选的
text表示要显示的文字，spriteSheet是使用的spriteSheet
这两个值也都可以通过相应的属性来设置

bitmapText.spriteSheet=spriteSheet;bitmapText.text="test";

我把官方的例子copy了一下，代码有点长，但大部分都是数据，关键的只有几行。
这个是官方例子使用的文字图片。
这里写图片描述

window.onload=init;var canvas;var canvasWidth;var canvasHeight;var stage;function init(){    console.log("init");    canvas=document.getElementById("myCanvas");    canvasWidth=canvas.width;    canvasHeight=canvas.height;    stage =new createjs.Stage(canvas);    createjs.Ticker.timingMode=createjs.Ticker.RAF;    createjs.Ticker.addEventListener("tick",stage);    var data = {        "animations": {            "V": {"frames": [21]},            "A": {"frames": [0]},            ",": {"frames": [26]},            "W": {"frames": [22]},            "B": {"frames": [1]},            "X": {"frames": [23]},            "C": {"frames": [2]},            ".": {"frames": [29]},            "Y": {"frames": [24]},            "D": {"frames": [3]},            "Z": {"frames": [25]},            "E": {"frames": [4]},            "F": {"frames": [5]},            "G": {"frames": [6]},            "H": {"frames": [7]},            "I": {"frames": [8]},            "J": {"frames": [9]},            "K": {"frames": [10]},            "!": {"frames": [27]},            "L": {"frames": [11]},            "M": {"frames": [12]},            "N": {"frames": [13]},            "O": {"frames": [14]},            "P": {"frames": [15]},            "Q": {"frames": [16]},            "R": {"frames": [17]},            "S": {"frames": [18]},            "T": {"frames": [19]},            "?": {"frames": [28]},            "U": {"frames": [20]}        },        "images": ["assets/spritesheet_font.png"],        "frames": [            [155, 2, 25, 41, 0, -10, -3],            [72, 2, 28, 43, 0, -8, -1],            [599, 2, 28, 38, 0, -8, -4],            [41, 2, 27, 44, 0, -8, -1],            [728, 2, 32, 38, 0, -6, -4],            [184, 2, 35, 41, 0, -4, -2],            [409, 2, 30, 39, 0, -7, -3],            [443, 2, 29, 39, 0, -7, -3],            [901, 2, 13, 35, 0, -8, -5],            [698, 2, 26, 38, 0, -9, -4],            [666, 2, 28, 38, 0, -8, -4],            [764, 2, 23, 38, 0, -10, -4],            [828, 2, 37, 36, 0, -3, -5],            [567, 2, 28, 38, 0, -8, -4],            [519, 2, 44, 38, 0, 1, -4],            [869, 2, 28, 36, 0, -8, -5],            [476, 2, 39, 38, 0, -2, -4],            [371, 2, 34, 39, 0, -5, -3],            [631, 2, 31, 38, 0, -6, -4],            [289, 2, 39, 40, 0, -2, -3],            [918, 2, 31, 32, 0, -6, -7],            [791, 2, 33, 37, 0, -5, -4],            [2, 2, 35, 46, 0, -4, 1],            [253, 2, 32, 40, 0, -6, -3],            [104, 2, 32, 43, 0, -6, -1],            [332, 2, 35, 39, 0, -5, -4],            [953, 2, 9, 16, 0, -17, -29],            [140, 2, 11, 41, 0, -16, -1],            [223, 2, 26, 41, 0, -7, -1],            [966, 2, 9, 10, 0, -17, -31]        ]    };    var spriteSheet=new createjs.SpriteSheet(data);    var str="Hello What the fuck!";    var bitmapText=new createjs.BitmapText(str,spriteSheet);    stage.addChild(bitmapText);}

显示结果如下，
这里写图片描述
其中data定义了每个字符对应的图片的位置。然后创建spriteSheet，再根据spriteSheet创建bitmapText就好了。

（细心的读者可能发现了在代码里的字符串里字母有大写有小写，但是出来的图片都是大写。我测试了一下，发现是这样的，比如说”a”,如果data里面指定”a”这个字符使用的图，就使用它，如果没有就是用”A”。如果在data里面没有对应的字符，就直接不显示）

这个类用于显示英语很方便，但是中文这么多字，作用就有限了。但是可以用来做显示游戏中的数字，毕竟数字就那么几个。
我下面写了个例子。
这个是我用到的图：
这里写图片描述
这里面每个数字都是100*100的。

window.onload=init;var canvas;var canvasWidth;var canvasHeight;var stage;function init(){    console.log("init");    canvas=document.getElementById("myCanvas");    canvasWidth=canvas.width;    canvasHeight=canvas.height;    stage =new createjs.Stage(canvas);    createjs.Ticker.timingMode=createjs.Ticker.RAF;    createjs.Ticker.addEventListener("tick",stage);    var data={        images:["assets/number.png"],        frames:{            width:100,            height:100        },        animations:        {            "0":{frames:[0]},            "1":{frames:[1]},            "2":{frames:[2]},            "3":{frames:[3]},            "4":{frames:[4]},            "5":{frames:[5]},            "6":{frames:[6]},            "7":{frames:[7]},            "8":{frames:[8]},            "9":{frames:[9]},            ".":{frames:[10]}        }    };    var spriteSheet=new createjs.SpriteSheet(data);    var bitmapText=new createjs.BitmapText("12138",spriteSheet);    stage.addChild(bitmapText);}

显示的结果如下
这里写图片描述

还有两个常用的属性，简单说下

letterSpacing
这个属性用来设置每个字符间的间隔

bitmapText.letterSpacing=50;

效果如下
这里写图片描述

也可以设置为负数，然后这些字就会挤在一起。

SpaceWidth
这个值用来设置空格字符显示的宽度。
如果在data中没有设置空格字符对应的图片，空格多占的宽度就是这个值的大小。如果这个值是0，就会按顺序查找”1”, “l”, “E”, “A”这几个字符，先找到哪个就按照哪个的宽度来显示，如果都没有的话，就按照第一个frame中图片的宽度来计算。
这个值默认是0。

var bitmapText=new createjs.BitmapText("1 2138",spriteSheet);bitmapText.spaceWidth=50;

显示效果如下
这里写图片描述

0 0