easelJS入门、事件、spritesheet
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(); }
