easelJS 初始入門
<%@ 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> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/raphael.js"></script> <script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script> <script type="text/javascript" src="js/Button5.js"></script> <script type="text/javascript" src="js/index023.js"></script> </head> <body> <div id="container1"> <canvas id="demoCanvas" width="500" height="300"></canvas> </div> <div> <canvas id="demo2" width='300' height='300'></canvas> </div> <div> <canvas id="demo3" width='300' height='300'></canvas> </div> <div> <canvas id="demo4" width='300' height='300'></canvas> </div> <div> <canvas id="demo5" width='500' height='100'></canvas> </div> <div> <canvas id="demo6" width='300' height="200"></canvas> </div> <div> <canvas id="demo7" width="300" height="200"></canvas> </div> <div> <canvas id="demo8" width="500" height="200"></canvas> </div> <div> <canvas id="demo9" width="500" height="100"></canvas> </div> <div> <canvas id="demo10" width="500" height="200"></canvas> </div> <div> <canvas id="demo11" width="500" height="200"></canvas> </div> <div> <canvas id="demo12" width="500" height="200"></canvas> </div> <div> <canvas id="demo13" width="500" height="100"></canvas> </div> <div> <select onchange="createjs.Ticker.setFPS(Number(this.value));"> <option value="10">10 fps</option> <option value="20" selected>20 fps</option> <option value="30">30 fps</option> <option value="40">40 fps</option> <option value="50">50 fps</option> <option value="60">60 fps</option> </select><br> <canvas id="demo14" width="500" height="200"></canvas> </div> <div> <input type="button" value="pause" id="btn15" onclick="btn15Click()" ><br> <canvas id="demo15" width="500" height="200"></canvas> </div> </body> </html>
$(function() { initCanvas(); // 一個可以感應的圓 init2(); // N個旋轉的可以感應的圓 init3(); // 一個轉臂和3個圓的故事 init4(); // 文字 init5(); // 繼承 init6(); // 鼠標點擊事件基礎 init7(); // 鼠標事件處理 init8(); // 事件冒泡 init9(); // 點擊區域 init10(); // stage的鼠標事件 init11(); // 鼠標拖動 init12(); // 動畫，初級 init13(); // 動畫，設置不同頻率 init14(); // 動畫，帶暫停 init15(); }); function initCanvas(e) { // 創建stage； var stage = new createjs.Stage('demoCanvas'); // 創建circle； var circle = new createjs.Shape(); circle.graphics.beginFill('red').drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; stage.addChild(circle); // 必須update一下才可以進行繪制； stage.update(); } var stage2,circle2; function init2(e) { stage2 = new createjs.Stage('demo2'); // 估計是連綴方式的，所以可以這樣寫；也可以circle = new createjs.Shape();stage.addChild(circle); circle2 = stage2.addChild(new createjs.Shape()); circle2.graphics.beginFill('red').drawCircle(50,50,50); circle2.x = 0; circle2.y = 0; // 這個事件會不停的執行 createjs.Ticker.on('tick',tick2); } function tick2(event) { circle2.alpha = 0.2; // 碰撞判斷hitTest if(circle2.hitTest(stage2.mouseX,stage2.mouseY)){ circle2.alpha = 1; } stage2.update(event); //console.log(stage2); } var stage3,holder3; function init3(e) { stage3 = new createjs.Stage('demo3'); // container也是一種容器； holder3 = stage3.addChild(new createjs.Container()); holder3.x = holder3.y = 150; for(var i=0;i<25;i++){ var shape = new createjs.Shape(); shape.graphics.beginFill(createjs.Graphics.getHSL(Math.random()*360,100,50)).drawCircle(0,0,30); shape.x = Math.random()*300 - 150; shape.y = Math.random()*300 - 150; holder3.addChild(shape); } createjs.Ticker.on('tick',tick3); } function tick3(event) { // 進行旋轉 holder3.rotation += 3; var l = holder3.getNumChildren(); for(var i=0;i<l;i++){ var child = holder3.getChildAt(i); child.alpha = 0.1; // globalToLocal ?? var pt = child.globalToLocal(stage3.mouseX, stage3.mouseY); // stage3.mouseInBounds ?? if(stage3.mouseInBounds && child.hitTest(pt.x,pt.y)){ child.alpha = 1; } } stage3.update(event); } var stage4, target4, arm4; function init4(e) { stage4 = new createjs.Stage('demo4'); target4 = stage4.addChild(new createjs.Shape()); target4.graphics.beginFill('red').drawCircle(0,0,45) .beginFill('white').drawCircle(0,0,30) .beginFill('red').drawCircle(0,0,15); target4.x = 100; target4.y = 180; arm4 = stage4.addChild(new createjs.Shape()); arm4.graphics.beginFill('black').drawRect(-2,-2,100,4) .beginFill('blue').drawCircle(100,0,8); arm4.x = 180; arm4.y = 100; createjs.Ticker.on('tick',tick4); } function tick4(event) { arm4.rotation += 5; target4.alpha = 0.2; // localToLocal ?? var pt = arm4.localToLocal(100,0,target4); if(target4.hitTest(pt.x,pt.y)){ target4.alpha = 1; } // stage4.update( );// 不輸入參數也是可以的； stage4.update(event); } function init5(e) { var stage5 = new createjs.Stage('demo5'); var text = new createjs.Text('Hello World','bold 86px Arial','#ff7700'); stage5.addChild(text); stage5.update(); // 目前還沒有進行定位； var text2 = new createjs.Text('Google Web Fonts is unavailable.'); stage5.addChild(text2); stage5.update(); } function init6(e) { var stage6, holder6; stage6 = new createjs.Stage('demo6'); var btn1 = stage6.addChild(new Button('Hello!','#f00')); btn1.x = 20; btn1.y = 20; var btn2 = stage6.addChild(new Button('GoodBye.','#0f0')); btn2.x = 20 ; btn2.y = btn1.y + 50; var btn3 = stage6.addChild(new Button('Hello again!','#0ff')); btn3.x = 20; btn3.y = btn2.y + 50; // tick還可以傳入stage對象？？ createjs.Ticker.on('tick', stage6); } // 鼠標點擊事件，基礎； function init7(e) { var stage = new createjs.Stage('demo7'); var circle = new createjs.Shape(); circle.graphics.beginFill('red').drawCircle(0,0,50); circle.x = 100; circle.y = 100; circle.on('click',function(){ alert('click'); }); // 可以寫的事件有： click, mousedown, mouseup, dblclick, pressmove, pressup, // mouseover / mouseout, and rollover / rollout. // 后四個事件需要stage.enableMouseOver(frequency). 處理一下； // on函數的全部功能：circle.on(type, listener, scope, once, data, useCapture); circle.on('mousedown',function(){ console.log('mousedown'); }); stage.addChild(circle); stage.update(); } var stage8,output8; // 鼠標事件處理 function init8(e) { stage8 = new createjs.Stage('demo8'); // 在stage上面enableMouseOver一下； stage8.enableMouseOver(); output8 = new createjs.Text('Test press, click, doubleclick, mouseover, and mouseout', '14px Arial'); output8.x = output8.y = 10; stage8.addChild(output8); var circle = new createjs.Shape(); circle.graphics.beginFill('red').drawCircle(0,0,50); circle.x = circle.y = 100; circle.name = 'circleName'; stage8.addChild(circle); var square = new createjs.Shape(); square.graphics.beginFill('green').drawRect(-50,-50,100,100); square.x = 250; square.y = 100; square.name = 'squareName'; stage8.addChild(square); circle.on('click',handleMouseEvent8); circle.on('dblclick',handleMouseEvent8); circle.on('mouseover',handleMouseEvent8); circle.on('mouseout',handleMouseEvent8); square.on('click',handleMouseEvent8); square.on('dblclick',handleMouseEvent8); square.on('mouseover',handleMouseEvent8); square.on('mouseout',handleMouseEvent8); stage8.update(); } function handleMouseEvent8(evt) { output8.text = 'evt.target:'+evt.target+', evt.type:'+evt.type; // 需要更新的時候再進行更新，節省cpu資源，不使用 tick:1 stage8.update(); } var stage9,output9,lastPhase9; // 事件冒泡 function init9(e) { stage9 = new createjs.Stage('demo9'); stage9.name = 'stage9'; output9 = new createjs.Text('try clicking on the background vs the label text\n\nthe background & label are both inside of a Container named button','13px courier'); output9.lineWidth = 280; output9.lineHeight = 13; output9.x = 190; output9.y = 10; var background = new createjs.Shape(); background.name = 'background'; background.graphics.beginFill('red').drawRoundRect(0,0,150,60,10); var label = new createjs.Text('click me!','bold 24px Arial','#ffffff'); label.name = 'label'; label.textAlign = 'center'; label.textBaseline = 'middle'; label.x = 150/2; label.y = 60/2; var button = new createjs.Container(); button.name = 'button'; button.x = 20; button.y = 20; button.addChild(background,label); // 如果設置了mouseChildren = false，只能從button觸發鼠標事件了，button的孩子就不能觸發鼠標事件了； // button.mouseChildren = false; stage9.addChild(button, output9); var targets = [stage9,button,label,background]; for(var i=0;i<targets.length;i++){ var target = targets[i]; target.on('click',handleClick9,false); target.on('click',handleClick9,true); } stage9.update(); } function handleClick9(evt) { if(evt.currentTarget == stage9 && evt.eventPhase == 1){ output9.text = 'target: eventPhase: currentTarget:\n'; } output9.text += evt.target.name+':'+evt.eventPhase+':'+evt.currentTarget.name+'\n'; // 會輸出好多的內容呢； console.log(output9.text); if(evt.currentTarget == stage9 && evt.eventPhase == 3){ stage9.update(); } } // 點擊區域 function init10(e) { var stage = new createjs.Stage('demo10'); stage.enableMouseOver(10); var label1 = new createjs.Text('text without hitArea','48px Arial','#f00'); label1.x = label1.y = 10; label1.alpha = 0.5; var label2 = new createjs.Text('text with hitArea','48px Arial','#00f'); label2.x = 10; label2.y = 80; label2.alpha = 0.5; // 創建一個點擊區域，沒有把這個點擊區域添加到顯示列表中 var hit = new createjs.Shape(); hit.graphics.beginFill('#000').drawRect(0,0,label2.getMeasuredWidth(),label2.getMeasuredHeight()); label2.hitArea = hit; label1.on('mouseover',handleInteraction10); label2.on('mouseover',handleInteraction10); label1.on('mouseout',handleInteraction10); label2.on('mouseout',handleInteraction10); stage.addChild(label1,label2); stage.update(); createjs.Ticker.addEventListener('tick',stage); } function handleInteraction10(event) { event.target.alpha = (event.type == 'mouseover')?1:0.5; } // stage的鼠標事件 function init11(e) { var oldX,oldY; var stage = new createjs.Stage('demo11'); // ?? stage.enableDOMEvents(true); var label = new createjs.Text('finger paint','24px Arial'); label.x = label.y = 10; var shape = new createjs.Shape(); stage.addChild(shape, label); var color = '#0ff'; var size = 2; stage.on('stagemousedown',function(event){ size = 10; }); stage.on('stagemouseup',function(event){ color = createjs.Graphics.getHSL(Math.random()*360, 100, 50); size = 2; }); // 把這個打開，才可能看到鼠標在stage外面的情況rawX/Y； stage.mouseMoveOutside = true; stage.on('stagemousemove',function(event){ if(oldX){ shape.graphics.beginStroke(color).setStrokeStyle(size,'round') .moveTo(oldX,oldY).lineTo(event.stageX,event.stageY); stage.update(); } oldX = event.stageX; oldY = event.stageY; // console.log("stageX/Y:"+event.stageX+";"+event.stageY); // 總是在范圍內 // console.log("rawX/Y:"+event.rawX+";"+event.rawY);// 可能<0，或者> weight/height }); stage.update(); } function init12(e) { var stage = new createjs.Stage('demo12'); stage.mouseMoveOutside = true; var circle = new createjs.Shape(); circle.graphics.beginFill("red").drawCircle(0, 0, 50); var label = new createjs.Text('drag me','bold 14px Arial','#fff'); label.textAlign = 'center'; label.y = -7; var dragger = new createjs.Container(); dragger.x = dragger.y = 100; dragger.addChild(circle,label); stage.addChild(dragger); dragger.on('pressmove',function(event){ event.currentTarget.x = event.stageX; event.currentTarget.y = event.stageY; stage.update(); }); stage.update(); } // 這樣會不停的運行tick001函數； createjs.Ticker.addEventListener('tick',tick001); function tick001(e) { // console.log('tick001'); } // 設置間隔時間 1000ms/40FPS = 25ms;放在前面、后面都是可以的； //createjs.Ticker.setInterval(250); // 后面設置setFPS(40)會覆蓋前面的設置； createjs.Ticker.setFPS(4); var stage13, circle13; // 動畫，初級 function init13(e) { stage13 = new createjs.Stage('demo13'); circle13 = new createjs.Shape(); circle13.graphics.beginFill('red').drawCircle(0, 0, 40); circle13.y = 50; stage13.addChild(circle13); createjs.Ticker.on('tick',tick13); createjs.Ticker.setFPS(40); } function tick13(e) { circle13.x = circle13.x + 5; if(circle13.x > stage13.canvas.width){ circle13.x = 0; } stage13.update(e); } var stage14, timeCircle14, tickCircle14; // 動畫，設置頻率 function init14(e) { stage14 = new createjs.Stage('demo14'); timeCircle14 = new createjs.Shape(); timeCircle14.graphics.beginFill('red').drawCircle(0, 0, 40); timeCircle14.y = 50; stage14.addChild(timeCircle14); tickCircle14 = new createjs.Shape(); tickCircle14.graphics.beginFill('blue').drawCircle(0, 0, 40); tickCircle14.y = 150; stage14.addChild(tickCircle14); createjs.Ticker.on('tick', tick14); createjs.Ticker.setFPS(20); } function tick14(event) { // event.delta - elapsedTimeInMS /1000msPerSecond * pixelsPerSecond timeCircle14.x = timeCircle14.x + (event.delta)/1000*100; // console.log(event.delta); // 這個delta跟setFPS(20)是有關系的； if(timeCircle14.x > stage14.canvas.width){ timeCircle14.x = 0; } tickCircle14.x = tickCircle14.x + 5; // 5*20 = 100; if(tickCircle14.x > stage14.canvas.width){ tickCircle14.x = 0; } stage14.update(event); } var stage15, pauseCircle15, goCircle15, output15; // 動畫，帶暫停 function init15(e) { stage15 = new createjs.Stage('demo15'); pauseCircle15 = new createjs.Shape(); pauseCircle15.graphics.beginFill('red').drawCircle(0, 0, 40); pauseCircle15.y = 50; stage15.addChild(pauseCircle15); goCircle15 = new createjs.Shape(); goCircle15.graphics.beginFill('blue').drawCircle(0, 0, 40); goCircle15.y = 150; stage15.addChild(goCircle15); createjs.Ticker.on('tick', tick15); output15 = stage15.addChild(new createjs.Text("","14px Arial","#000")); output15.lineHeight = 15; output15.textBaseline = "top"; output15.x = 10; output15.y = stage15.canvas.height - output15.lineHeight*3-10; } function tick15(event) { goCircle15.x += 10; if(goCircle15.x > stage15.canvas.width){ goCircle15.x = 0; } if(!createjs.Ticker.getPaused()){ pauseCircle15.x += 10; if(pauseCircle15.x > stage15.canvas.width){ pauseCircle15.x = 0; } } output15.text = "getPaused() = "+createjs.Ticker.getPaused()+"\n"+ "getTime(true) = "+createjs.Ticker.getTime(true)+"\n"+ "getTime(false) = "+createjs.Ticker.getTime(false); stage15.update(event); } function btn15Click(e) { var paused = !createjs.Ticker.getPaused(); createjs.Ticker.setPaused(paused); document.getElementById('btn15').value = paused?"unpause":"pause"; }
(function () { var Button = function(label, color){ this.initialize(label, color); }; var p = Button.prototype = new createjs.Container(); p.label; p.background; p.count = 0; p.Container_initialize = p.initialize; p.initialize = function(label,color){ this.Container_initialize(); this.label = label; if(!color) { color ='#ccc'; } var text = new createjs.Text(label, '20px Arial','#000'); text.textBaseline = 'top'; text.textAlign = 'center'; var width = text.getMeasuredWidth() + 30; var height = text.getMeasuredHeight() + 20; this.background = new createjs.Shape(); this.background.graphics.beginFill(color).drawRoundRect(0,0,width,height,10); text.x = width /2; text.y = 10; this.addChild(this.background, text); this.on('click', this.handleClick); this.on('tick', this.handleTick); this.mouseChildren = false; }; p.handleClick = function(event){ var target = event.target; alert('You clicked on a button: '+ target.label); }; p.handleTick = function (event) { p.alpha = Math.cos(p.count++*0.1)*0.4+0.6; }; window.Button = Button; }());