easelJS入门、事件、spritesheet

时间:2023-03-08 21:18:55

easelJS入门、事件、spritesheet

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EaselJS: API Test 2</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/index026_4.js"></script>
<script type="text/javascript">
console.log('a');
</script>
<style type="text/css" >
#demo1{
border:1px solid red;
}
</style>
</head>
<body>
<img id='img01' src='./assets/img.png' />
<canvas id="demo1" width="960" height="400"></canvas>
</body>
</html>
//var img = new Image();
//img.src = './assets/daisy.png';
//img.onload = funLineTo;
//乌夜啼 五代 南唐 李煜
//昨夜风兼雨,帘帏飒飒秋声。 //帏-音围,
//烛残漏断频欹枕,起坐不能平。 //欹-音期
//世事漫随流水,算来一梦浮生。
//醉乡路稳宜频到,此外不堪行。
//帏-音围,欹-音期 $(function() {
funLineTo();
});
function funLineTo(e) {
var stage = new createjs.Stage('demo1');
// var shape = new createjs.Shape(new createjs.Graphics().beginStroke(STROKE_COLOR).moveTo(5, 35).lineTo(110, 75).endStroke());
var shape = new createjs.Shape();
shape.graphics.beginStroke('blue').moveTo(5, 35).lineTo(110, 75);
shape.graphics.beginStroke('red').moveTo(5, 40).lineTo(110, 80);
shape.graphics.beginStroke('blue').moveTo(50, 20).arcTo(150, 20, 150, 70, 50);
shape.graphics.beginStroke('red').moveTo(50,20).lineTo(100,20).moveTo(150,70).lineTo(150,20);
// 不用连缀写法会使代码长一些
// shape.graphics.beginStroke('red');
// shape.graphics.moveTo(5,45);
// shape.graphics.lineTo(110,85);
// shape.graphics.endStroke();
// 可以不停的连缀写
// shape.graphics.beginStroke('red').moveTo(5, 50).lineTo(110, 90).lineTo(5,55).lineTo(110,95);
// 必须添加到stage上面
var g = shape.graphics;
// g.beginStroke('red').moveTo(0,100).quadraticCurveTo(50,150,100,100).quadraticCurveTo(150,50,200,100);
// g.beginStroke('blue').moveTo(0,100).lineTo(200,100);
// g.setStrokeStyle(3).beginStroke('green').moveTo(0,100).bezierCurveTo(50,150,150,50,200,100); // 可以使用这样的方式统一进行颜色的配置
// 颜色数组,比例数组;(0,0)->(100,0)和(0,0)->(100,100)两种情况
var g1 = g.beginLinearGradientStroke(['#000','#fff','#000'],[0,0.5,1],0,0,100,0);
g1.moveTo(0,100).lineTo(100,100);
g1.drawRect(20,20,100,100);
g.beginStroke('rgba(0,0,0,1)').moveTo(0,110).lineTo(100,110).endStroke(); // 先endStroke()竟然可以把之前的设置清除;
// g.endStroke().beginFill('#ff0').rect(5,5,100,100);
// g.beginStroke('red').rect(10,10,100,100);
// g.beginFill('#f00').drawRoundRect(5,5,100,100,5);
// g.beginFill('#ff0').drawCircle(50,50,20);
// g.beginRadialGradientFill(['#f00','#0f0','#00f'],[0,0.5,1],50,50,0,50,50,30).drawCircle(50,50,30);
// g.beginFill('#ff0').drawEllipse(50,50,20,30); // g.beginFill('#ff0').drawPolyStar(50,50,30,5,0.5,90).endFill();
// g.beginFill('#ff0').drawPolyStar(50,50,30,5,0.5,0).endFill();
// g.beginStroke('#f00').drawCircle(50,50,30).drawCircle(50,50,15); //或者使用img.onload=fun方式加载
// g.setStrokeStyle(25).beginBitmapStroke($('#img01').get(0)).rect(5,5,100,100); // 左右右左x上下
// g.beginStroke('#f00').drawRoundRectComplex(5,5,70,70,5,10,15,20); // 注意bitmapFill是从什么地方开始重复的;
// g.beginBitmapFill($('#img01').get(0),'repeat-x').rect(5,0,30,30);
// 这样还能够看见
// g.beginBitmapFill($('#img01').get(0),'no-repeat').rect(0,0,30,30);
// 这样就看不见了
// g.beginBitmapFill($('#img01').get(0),'no-repeat').rect(10,10,30,30); // var g2 = g.beginLinearGradientFill(['#000','#fff'],[1,0],0,100,100,100);
// g2.drawRect(0,0,200,200); // 可以清空之前的绘制;
g.clear(); // 文字是单独的对象
var txt = new createjs.Text('hello','arial 14pt','#f00');
txt.y = 45;
txt.x = 45;
txt.textAlign = 'left';//'right';//'start';//'center';//'left';//default is left
txt.textBaseline = 'middle';
stage.addChild(txt);
g.beginStroke('#0f0').moveTo(45,45).lineTo(65,45).moveTo(45,45).lineTo(45,65); stage.addChild(shape);
// 必须进行update才可以显示
stage.update();
} //var name = "The Window";
//var object = {
// name : "My Object",
// getNameFunc : function() {
// console.log("1:"+this);
// return function() {
// console.log("2:"+this);
// return this.name;
// };
// }
//};
//alert(object.getNameFunc()());
//console.log(object.getNameFunc());
//console.log(object.getNameFunc()());
$(function() {
init();
});
function init(e) {
var stage = new createjs.Stage('demo1');
// 增加一个set可以使圆形整个进行偏移;
var shape = new createjs.Shape();//.set({x:100,y:100,alpha:0.5});
// arc(x,y,radius,angleStart,angleEnd,clockwise)
shape.graphics.beginStroke('red').arc(50,50,20,0,Math.PI*0.5,true);
shape.graphics.beginStroke('red').arc(60,60,20,0,Math.PI*0.5,false);
// 使用set导致了偏移,这个进行定位;不仅仅是偏移,还有其他的属性;
var shape2 = new createjs.Shape();
shape2.graphics.beginStroke('blue').moveTo(100,100).lineTo(150,100);
shape2.graphics.beginStroke('blue').moveTo(150,150).lineTo(200,150);
// shape2.clear()导致都不显示了;
// shape2.clear();
stage.addChild(shape2); // 先绘制个圆,进行BlurFilter的研究
shape.graphics.beginFill('red').drawCircle(200,50,30);
var blurFilter = new createjs.BlurFilter(5,5,1);
shape.filters = [blurFilter];
var bounds = blurFilter.getBounds();
console.log('x:'+bounds.x+',y:'+bounds.y+',w:'+bounds.width+',h:'+bounds.height);
// API:cache(x,y,width,height),
// shape.cache(170+bounds.x,20+bounds.y,60+bounds.width,60+bounds.height);
//所以可以随便写一下;
shape.cache(0,0,500,500);
// updateCache()就没有东西了;
// shape.updateCache(); // cache之后如果需要更新,必须调用updateCache();cache可以加速渲染,不需要为每一个tick事件响应;
shape.graphics.beginStroke('green').moveTo(0,0).lineTo(100,100);
// shape.updateCache();
// 或者重新cache()一次,w,h如果小了就会删除圆了;
// shape.cache(0,0,100,100); // stage.addChild(shape); // 先绘制一个圆,进行colorFilter的研究
var shape3 = new createjs.Shape();
shape3.graphics.beginFill('red').drawCircle(50,50,30);
// ColorFilter API( [redMultiplier=1] [greenMultiplier=1] [blueMultiplier=1] [alphaMultiplier=1] [redOffset=0] [greenOffset=0] [blueOffset=0] [alphaOffset=0])
var colorFilter = new createjs.ColorFilter(0.5,1,1,1);
// var colorFilter = new createjs.ColorFilter(0.5,1,1,1,125,0,0,0,0);
shape3.filters=[colorFilter];
// shape.filters是一个数组,可以增加多个filter;
shape3.filters=[colorFilter,blurFilter];
shape3.cache(0,0,500,500); // ColorMatrixFilter的研究
// 首先研究ColorMatrix
var colorMatrix = new createjs.ColorMatrix();
console.log(colorMatrix);
// Hue 色调;adjustBrightness亮度、adjustColor颜色、adjustContrast对比度
var cMatrix2 = colorMatrix.adjustHue(100);
console.log(cMatrix2);
console.log(cMatrix2.toArray());
// ColorMatrixFilter使用ColorMatrix作为参数
var colorMatrixFilter = new createjs.ColorMatrixFilter(cMatrix2);
shape3.filters = [colorMatrixFilter];
shape3.updateCache(); // stage.addChild(shape3); // mask 的研究
var shape4 = new createjs.Shape();
shape4.graphics.beginStroke('red').drawCircle(50,50,30);
var shape5 = new createjs.Shape();
shape5.graphics.beginStroke('blue').moveTo(50,0).lineTo(50,100);
// stage.addChild(shape4);
// 这样就按照shape4的尺寸进行了截取;
shape5.mask = shape4;
stage.addChild(shape5); stage.update();
}
$(function() {
init();
});
function init(e) {
var stage = new createjs.Stage('demo1');
var shape = new createjs.Shape();
// 事件api在DisplayObject对象中
// click事件处理
shape.graphics.beginFill('red').drawCircle(50,50,20);
var s = shape.addEventListener('click',shapeEvent);
console.log(s);// 不能连缀写事件; //dblclick,mousedown,mouseover,mouseout
// stage.enableMouseOver(); // 必须打开这个事件,才能处理mouseover,mouseout,rollover,rollout事件;
// shape.addEventListener('dblclick',shapeEvent);
// shape.addEventListener('mouseover',shapeEvent);
// shape.addEventListener('mouseout',shapeEvent);
// shape.addEventListener('mousedown',shapeEvent);
// shape.addEventListener('pressup',shapeEvent);
// shape.addEventListener('rollover',shapeEvent); // 不会冒泡
// shape.addEventListener('rollout',shapeEvent); // 不会冒泡 //pressmove事件,event.currentTarget.x-的基准是要进行偏移
// console.log(shape.x);// 直接打印出来就会发现这个x是0;shape的x与绘制出来的circle的x不是一个概念!
// shape.addEventListener('pressmove',function(event){
// console.log(event);// 可以打印出来查看x,y信息
// console.log(event.currentTarget);// 可以打印出来查看x,y信息
// event.currentTarget.x = event.stageX - 50; // 减去50进行修正;shape对象的x需要基于开始位置定义;
// event.currentTarget.y = event.stageY - 50;
// stage.update();
// }); // pressmove事件,使用一个container
// var circle = new createjs.Shape();
// circle.graphics.beginFill('blue').drawCircle(0,0,30);
// var container = new createjs.Container();
// container.x = container.y = 100;
// container.addChild(circle);
// stage.addChild(container);
// console.log(container.x);// 这个x就已经是定位了;
// container.addEventListener('pressmove',function(event){
// console.log(event);// 可以打印出来查看x,y信息
// console.log(event.currentTarget);// 可以打印出来查看x,y信息
// console.log(event.currentTarget.x+';'+event.stageX);
// event.currentTarget.x = event.stageX;
// event.currentTarget.y = event.stageY;
// stage.update();
// }); // stage mouse event
// stage.addEventListener('stagemousedown', stageMouseEvent);
// stage.addEventListener('stagemouseup', stageMouseEvent);
// stage.addEventListener('stagemousemove', stageMouseEvent);
// 事件冒泡机制
// stage.addEventListener('click',shapeEvent); // stage不是display object,在第一阶段不能触发; // shape 对象 tick事件, stage update的时候执行
// shape.addEventListener('tick',shapeEvent);
// stage 对象tick事件, stage update的时候执行
// stage.addEventListener('tick',shapeEvent); // Ticker注册的tick事件
// on方法传参 on(type,listener,[scope],[once=false],[data],[useCaptuer=false])
// on off 方法是简写,on方法会有不同
// createjs.Ticker.on('tick',shapeTick,null,false,{count:3});
createjs.Ticker.on('tick',shapeTick2,null,false,{shapeObj:shape,stageObj:stage}); stage.addChild(shape);
stage.update(); }
// 参数传递,hitTest事件响应;比较占用CPU资源;
function shapeTick2(e,data) {
var shape = data.shapeObj;
var stage = data.stageObj;
shape.alpha = 1;
if(shape.hitTest(stage.mouseX,stage.mouseY)){
shape.alpha= 0.1;
}
stage.update();
}
// 输出tick事件调用,移除tick事件,不移除事件会很占CPU资源的;
function shapeTick(e,data) {
console.log(e);
console.log(data);
console.log(data.count);
// 移除tick事件
e.remove();
}
function shapeEvent(e) {
// 事件冒泡机制;
// console.log(e.eventPhase);
console.log(e.type);
}
function stageMouseEvent(e) {
console.log(e.type);
}
$(function() {
init();
});
var stage;
function init(e) {
stage = new createjs.Stage('demo1'); var ss = new createjs.SpriteSheet({
'animations' : {
'a' : [ 0, 2,'b' ],// 连续帧情况,四个参数: start,end,[next],[speed].
'b' : [ 3, 8 ,'a']
},
'images' : [ 'assets/sp.png' ],
'frames' : {
'regX' : 0,
'regY' : 0,
'height' : 38,
'width' : 38,
'count' : 8
}
});
ss.getAnimation('a').speed = 1;
// ss.getAnimation('a').next = 'b';
// ss.getAnimation('b').next = 'a'; var ss2 = new createjs.SpriteSheet({
images : [ 'assets/sp.png', 'assets/sp2.jpg' ],
frames : {
'height' : 38,
'width' : 38
},
animations : {
'a' : { // 非连续帧情况
frames : [ 0,2,4,6,8 ],
next : 'b',
speed: 0.5 // 帧的播放速度,如果是2就会跳帧播放;
},
'b' : [ 9, 17, 'a' ]// 连续帧情况,四个参数: start,end,[next],[speed].
}
});
// var sprite = new createjs.Sprite(ss,'a');
var sprite = new createjs.Sprite(ss2,'a');
sprite.scaleY = sprite.scaleX = 1;
createjs.Ticker.setFPS(1);
// createjs.Ticker.addEventListener('tick',funTick);
createjs.Ticker.addEventListener('tick',stage);
stage.addChild(sprite);
}
function funTick(e) {
stage.update();
}