createjs初学-BitmapText使用实例

BitmapText是createjs库中的一种组件,用于利用SpriteSheet显示特定文字。本文介绍了BitmapText的基本用法,包括构造函数参数、如何创建SpriteSheet以及在实际应用中展示数字的示例。还提到了letterSpacing和SpaceWidth两个属性,分别用于设置字符间间隔和空格的宽度,并展示了它们的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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;

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

基于Javascript的bitmap处理,并且将位图输出为base64编码以便于浏览器进行显示。   一、Bitmap.create(width, height, bgcolor)     创建一个width x height像素大小的位图,底色为bgcolor所代表的颜色。     如:bitmap.create(10, 10, 0xff0000); // 创建一个10 x 10像素的底色为红色的位图 二、Bitmap.toBase64()     将位图输出为base64编码的带datauri头(data:image/bmp;base64,)的字符串,以便于在浏览器里显示。     如:document.getElementById('img1').src = bitmap.toBase64(); 三、Bitmap.fromBase64()     自图像的BASE64编码中恢复位图数据,目前只支持24位色的BMP位图数据。     如:bitmap.fromBase64('Qk06AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABgAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=='); 四、Bitmap.setBitmapBytes(val, idx, length)     修改bitmap位图数据的第idx位置起的length字节为val值。 五、Bitmap.getBitmapBytes(idx, length)     获取bitmap位图数据的第idx位置起的length个字节的值,返回值为数组。 六、Bitmap.setHeaderValue(attribute, headerValue)     设置attribute头属性的值为headerValue,attribute必须为BitMapFormat的成员属性,需要提供offset、length等属性值。     如:bitmap.setHeaderValue(BitmapFormat.biWidth, 500); // 设置位图的宽度为500像素值 七、Bitmap.getHeaderValue(attribute)     获取位图attribute头属性的值,attribute必须为BitmapFormat的成员属性,需要提供offset、length等属性值,返回的是经过Endian转换后的实际整数值。 八、Bitmap.setPixel(x, y, color)     设置位图的(x, y)位置的像素值为color。 九、Bitmap.getPixel(x, y)     获取位图的(x, y)位置的RGB值,返回的内容为[ rr, gg, bb ]的数组内容 标签:jsBitmap
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值