Createjs学习笔记2-图片的加载与处理
EaselJS中提供Bitmap，可以很方便的载入与处理：
<script>
var stage;
function init(){
stage = new createjs.Stage("game");
var bg = new createjs.Bitmap("img/bgd.jpg");
stage.addChild(bg);
createjs.Ticker.addEventListener('tick',update);
}
function update(event){
stage.update();
}
</script>
一、几种对图片的处理：
1、只选取图片的一部分显示在页面
可以使用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;
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);
可以让遮罩在图片上动起来，动态的显示图片的不同部分。即在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>
3.给图片添加滤镜和图片的cache方法
EaseLJS提供了许多图像处理的方法——添加滤镜filters，比如
最简单的模糊图像，使用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];
bg.cache(0,0,bg.image.width,bg.image.height);
在官方的API中可以有所有Filter对象的详细用法和介绍，而且在官方提供的实例中，Demo5和Demo7都是关于Filter的例子，当然你也不用担心因为cache()缘故无法修改图片，只需要再调用一次图片的uncache()方法就可以了。
二、应用：拼图小游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;overflow: hidden;}
html,body{width: 100%;height: 100%;}
#game{background: #1d292c;}
</style>
<script src="js/easeljs.js"></script>
<script src="js/tweenjs.min.js"></script>
</head>
<body onload="init()">
<canvas id="game"></canvas>
<script>
const PUZZLE_COLUMNS =3;
const PUZZLE_ROWS =2;
const SIZEX = 500;
const SIZEY = 450;
var gamecanvas = document.getElementById('game');
var stage = new createjs.Stage(gamecanvas);
var pieces = [];
var selectedPieces = [];
function init(){
canvasResize();
buildPuzzle();//导入图片并分割为大小相等的15小块
startGame();
setTimeout(shufflePuzzle, 2000);//设定2秒后打乱图片的顺序
}
window.onresize = function () {
canvasResize();
}
function canvasResize() {
gamecanvas.width = document.body.clientWidth;
gamecanvas.height = document.body.clientHeight;
stage.update();
}
function buildPuzzle() {
//导入图片，并分成3*2块。放入pieces
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('img/bgd.jpg');
piece.scaleX = 0.5;
piece.scaleY = 0.5;
piece.sourceRect = new createjs.Rectangle(col * SIZEX, row * SIZEY, SIZEX, SIZEY);
piece.homePoint = {x: col * SIZEX/2, y: row * SIZEY/2};
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(){
//2秒后，随机打乱这3*2块图
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*SIZEX/2, y:row*SIZEY/2}, 200);
piece.addEventListener('click', onPieceClick);
col++;
if (col===PUZZLE_COLUMNS){
col = 0;
row++;
}
}
}
function onPieceClick(e){
//点击选中或者取消
if (selectedPieces===2)
{return;}
var piece = e.target;
piece.alpha = 0.5;
selectedPieces.push(piece);
if(selectedPieces.length ===2){
evalSelectedPieces();
}
}//点击的图片添加到一个数组中，并且给被点击的图片添加一个滤镜效果特别显示
function evalSelectedPieces(){
//交换图片的位置，这里使用了TweenJS来创建交换的动画效果
var piece1 = selectedPieces[0];
var piece2 = selectedPieces[1];
createjs.Tween.get(piece1).wait(100).to({x:piece2.x, y:piece2.y},200);
createjs.Tween.get(piece2).wait(100).to({x:piece1.x, y:piece1.y},200).call(function(){
evalPuzzle();
});
}
function evalPuzzle(){
var win = true;
var i, piece;
selectedPieces[0].alpha = 1;
selectedPieces[1].alpha = 1;
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 ARE WINER！');
window.location.reload();
}, 200);
}
else{
selectedPieces = [];
}
}//判断一下是不是全部图片都到了正确位置
function startGame(){
createjs.Ticker.addEventListener('tick', function(){
stage.update();
});
}//tick函数
</script>
</body>
</html>
评论已关闭