如何使用EaselJS载入图片并进行简单的处理
除了使用EaselJS中的Shape()来创建图形,EaselJS中还提供Bitmap可以很方便的载入图片,同Shape一样只需要创建一个Bitmap实例。
var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();
直接创建并导入到Stage中,随后调用stage.update(),一般情况下仅仅做这些是不能正常显示图片,在图片载入后必须要重绘一下stage才能显示出来。所以使用stage的tick事件来创建的基础框架可以正常显示,因为tick事件中,每隔一点时间自动刷下stage,最基本的框架如下。
<script>
var stage;
function init(){
stage = new createjs.Stage("game");
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
}
function update(event){
stage.update();
}
</script>
把创建Bitmap并添加到stage的语句添加到init()中,
<script>
var stage;
function init(){
stage = new createjs.Stage("game");
var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
}
function update(event){
stage.update();
}
</script>
刷新页面即可显示出图片,同样可以设置Bitmap的x/y,scaleX/scaleY,alpha等属性,添加shadow等处理,不过对于图片,有几个特别的地方。
1.只选取图片的一部分显示在页面
如果只打算显示一部分,而不是全部整张图片,除了用图片编辑软件来直接切图外,在EaslJS中提供了相关的方法。
当然通过设置width和height是不能实现的,而且如果要显示的是图片中间的某个部分,通过设置长短完全不可能实现。
这时可以使用EaselJS内置的Rectangle对象来创建一个选取框,显示图片的某各部分。首先新建一个Rectangle,rect =new createjs.Rectangle(x,y,w,h);确定要选择的区域,开始点坐标xy,选取的长度w和高度h,最后修改Bitmap的sourceRect赋值为创建好的Rectangle。
var rect = new createjs.Rectangle(100,100,100,100);
bg.sourceRect = rect;
把bg添加到舞台stage中后,就可以看到图片只显示从(100,100)点开始的一个100像素正方形区域。使用Rectangle可以很方便的创建一个拼图游戏,选一张大图片,然后分割成为大小相等的12块图形并记录正确的位置,然后随机打乱顺序,给每块图形添加一个点击事件,点击两块后交换位置,在stage的tick事件处理函数中每隔一段时间检查是否全部12块图片都回到了正确的位置,是则游戏结束。在CreateJS的官方示例中,Demo3就是使用Rectangle来把图片划分为几块的一个列子。
2.给图片添加遮罩Mask
比如给图片加上一个圆形的遮罩,只显示图片与圆遮罩相交的部分。
添加遮罩,首先就是创建一个Shape图形,绘制好图形的大小,并确定遮罩区域在图片上的位置,也就是要显示图片的部分,最后修改图片的mask属性赋值为创建的Shape并把Shape添加到stage;
var shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0,0,100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;
stage.addChild(shape);
这样就只会显示出图片与shape相交的一个圆形区域。并且可以让遮罩在图片上动起来,动态的显示图片的不同部分。让图片动起来是一个简单的动画,虽然在CreateJS中提供的TweenJS来创建补间动画,但是也可以在不使用TweenJS的情况下创建一个简单的动画,即在tick事件的处理函数中,每个一段时间改变Shape的x/y坐标,这样每次刷新stage后Shape自然会出现在新的坐标位置。
<script>
var stage,shape, bg;
function init(){
stage = new createjs.Stage("game");
bg = new createjs.Bitmap("./background.png");
//var rect = new createjs.Rectangle(100,100,100,100);
//bg.sourceRect = rect;
shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0,0,100);//遮罩图形
shape.x = 200;
shape.y = 100;
bg.mask = shape;//给图片bg添加遮罩
stage.addChild(shape);
stage.addChild(bg);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
}
function update(event){//tick函数
shape.x += 5;
if (shape.x > bg.getBounds().width){
shape.x = 0;
}
stage.update();
}
</script>
这样圆形的Shape遮罩就会在图片上来回移动,也可以给Shape添加一个随鼠标拖动的事件相应函数,让遮罩随着鼠标移动。用这个方法可以创建一个X光的小游戏。首先准备两张图片,一张人体和一张骨骼图,叠放在一起添加到stage,同时给骨骼图添加一个随鼠标移动的Shape遮罩,这样页面上只会有人体图和骨骼图的遮罩部分显示出来,从效果上就像X光一样。
3.给图片添加滤镜和图片的cache方法
同Shape对象一样,也可以通过定义图片的shadow来给图片添加一点立体感,不过除了给图片添加阴影Shadow效果外,EaseLJS提供了更多图像处理的方法——添加滤镜filters,在createjs的api中包含几个XXXXXFilter对象,就是用来处理图片,给图片添加不同的效果。
比如,最简单的模糊图像,使用blur = new createjs.BlurFilter(5,5,1);来创建一个对象,并把这个Filter对象添加到图片的filters列表中img.filters = [blur];这里修改图片的filters属性时必须要使用[],哪怕仅有一个Filter。
var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];
做完这些后发现并不能使图像变模糊,这里还有非常重要的一步,调用图像的cache()方法。因为给图片添加Filter后如果stage立刻刷新,则Filter只能保持一帧的效果,而使用图片的cache()方法后,才可以使得无论舞台怎么刷新,都可以保持住Filter的效果,添加cache还有很多作用,可以提高FPS等,在官方提供的示例中,Demo4 caching就是一个使用cache()的例子,在这里想让Filter显示,只需要再加一句:
bg.cache(0,0,bg.image.width,bg.image.height);
在官方的API中可以有所有Filter对象的详细用法和介绍,而且在官方提供的实例中,Demo5和Demo7都是关于Filter的例子,当然你也不用担心因为cache()缘故无法修改图片,只需要再调用一次图片的uncache()方法就可以了。
const PUZZLE_COLUMNS =5;
const PUZZLE_ROWS =3;
const PUZZLE_SIZE = 200;
var stage;
var pieces = [];
var selectedPieces = [];
function init(){
stage = new createjs.Stage(document.getElementById('game'));
buildPuzzle();//导入图片并分割为大小相等的15小块
startGame();
setTimeout(shufflePuzzle, 2000);//设定2秒后打乱图片的顺序
}
function buildPuzzle() {
var i, piece;
var l = PUZZLE_COLUMNS * PUZZLE_ROWS;
var col = 0;
var row = 0;
for (i = 0; i < l; i++) {
piece = new createjs.Bitmap('mam.png');
piece.sourceRect = new createjs.Rectangle(col * PUZZLE_SIZE, row * PUZZLE_SIZE, PUZZLE_SIZE, PUZZLE_SIZE);
piece.homePoint = {x: col * PUZZLE_SIZE, y: row * PUZZLE_SIZE};
piece.x = piece.homePoint.x;
piece.y = piece.homePoint.y;
stage.addChild(piece);
pieces[i] = piece;
col++;
if (col === PUZZLE_COLUMNS) {
col = 0;
row++;
}
}
}//创建小图片块
function shufflePuzzle(){
var i, piece, randomIndex;
var col = 0;
var row = 0;
var p=[];
p = p.concat(pieces);
var l = p.length;
for(i=0; i<l; i++){
randomIndex = Math.floor(Math.random()* p.length);
piece = p[randomIndex];
p.splice(randomIndex,1);
createjs.Tween.get(piece).to({x:col*PUZZLE_SIZE, y:row*PUZZLE_SIZE}, 200);
piece.addEventListener('click', onPieceClick);
col++;
if (col===PUZZLE_COLUMNS){
col = 0;
row++;
}
}
}//洗牌,打乱顺序
function onPieceClick(e){
if (selectedPieces===2)
{return;}
var piece = e.target;
var matrix = new createjs.ColorMatrix().adjustColor(15,10,100,180);
piece.filters=[new createjs.ColorMatrixFilter(matrix)];
piece.cache(0,0,PUZZLE_SIZE,PUZZLE_SIZE);
selectedPieces.push(piece);
if(selectedPieces.length ===2){
evalSelectedPieces();
}
}//点击的图片添加到一个数组中,并且给被点击的图片添加一个滤镜效果特别显示
function evalSelectedPieces(){
var piece1 = selectedPieces[0];
var piece2 = selectedPieces[1];
createjs.Tween.get(piece1).wait(300).to({x:piece2.x, y:piece2.y},200);
createjs.Tween.get(piece2).wait(300).to({x:piece1.x, y:piece1.y},200).call(function(){
setTimeout(evalPuzzle, 200);
});
}//交换图片的位置,这里使用了TweenJS来创建交换的动画效果
function evalPuzzle(){
var win = true;
var i, piece;
selectedPieces[0].uncache();
selectedPieces[1].uncache();
for(i=0; i<pieces.length; i++){
piece = pieces[i];
if(piece.x != piece.homePoint.x || piece.y != piece.homePoint.y){
win = false;
break;
}
}
if(win){
setTimeout(function(){
alert('YOU DID IT!');
}, 200);
}
else{
selectedPieces = [];
}
}//判断一下是不是全部图片都到了正确位置
function startGame(){
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', function(){
stage.update();
});
}//tick函数