第五章、從文檔到動畫(3) · createjs-從入門到精通

>[danger]## 制作動畫或小游戲——CreateJS事件 * * * * * <div class = "post"> <div id="cnblogs_post_body" class="blogpost-body">在Canvas中如果要添加事件，就需要計算坐標來模擬各種事件，而EaselJS中已經封裝好了多個事件，只需調用即可。 <h1>一、事件</h1> 1）點擊 事件是綁定在<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html" target="_blank">Shape</a>類中的，<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_click" target="_blank">click</a>事件與DOM中的意思是一樣的，還有個雙擊事件<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_dblclick" target="_blank">dblckick</a>，完整的代碼<a href="http://codepen.io/strick/pen/WwJxPO" target="_blank">可以查看這里</a>。 <div class="cnblogs_code"> <pre>var object = new createjs.Shape(); object.addEventListener('click', function(e) { alert('click'); });</pre> </div> 可以用<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#method_addEventListener" target="_blank">addEventListener</a>來做綁定，如果想要讓移動端也支持，就需要在<a href="http://www.createjs.cc/easeljs/docs/classes/Touch.html" target="_blank">Touch</a>類中調用<a href="http://www.createjs.cc/easeljs/docs/classes/Touch.html#method_enable" target="_blank">enable</a>方法。 <div class="cnblogs_code"> <pre>createjs.Touch.enable(stage);</pre> </div> 除了click外，還有好多其它方法，Shape類的所有事件如下： <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160416145004754-1471008975.jpg" alt="" />   2）移動 在CSS中有一個“:hover”的偽類，通過這<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_mouseover" target="_blank">mouseover</a>和<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_mouseout" target="_blank">mouseout</a>兩個事件可以模擬出這個效果。 首先要設置允許觸發，引用stage類中的<a href="http://www.createjs.cc/easeljs/docs/classes/Stage.html#method_enableMouseOver" target="_blank">enableMouseOver</a>方法，完整的代碼可以<a href="http://codepen.io/strick/pen/YqLGzy" target="_blank">在這里查看到</a>。 <div class="cnblogs_code"> <pre>stage.enableMouseOver(); circle.addEventListener("mouseover", function(e) { circle.alpha = .5; stage.update(); }); circle.addEventListener("mouseout", function(e) { circle.alpha = 1; stage.update(); });</pre> </div> <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160416150821535-650100092.gif" alt="" data-pinit="registered" />   有兩個事件與這兩個比較類似，<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_rollover" target="_blank">rollover</a>和<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_rollout" target="_blank">rollout</a>，有兩個地方與上面的兩個事件不同。 1. 這兩個事件不冒泡 2. 當給<a href="http://www.createjs.cc/easeljs/docs/classes/Container.html" target="_blank">Container</a>設置四個事件后，只有當離開容器時觸發<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_rollout" target="_blank">rollout</a>，進入容器時<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_rollover" target="_blank">rollover</a>，而在容器中的子元素進入或離開會分別觸發<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_mouseover" target="_blank">mouseover</a>和<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_mouseout" target="_blank">mouseout</a>。 下面gif圖是一次鼠標移動的過程，總共打印出了四組數據，詳細代碼可以<a href="http://codepen.io/strick/pen/ZWopWm" target="_blank">查看這里</a>。 第一次：是從外面進入藍色區域。 第二次：是從藍色區域進入紅色區域。 第三次：是從紅色區域進入藍色區域。 第四次：是從藍色區域進入到外面。 <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160416155838816-2121845566.gif" alt="" data-pinit="registered" />   3）拖放 并沒有專門的拖放事件，但是可以通過其它事件來模擬。 Shape類中有個<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#event_mousedown" target="_blank">mousedown</a>事件，鼠標按下，在這個事件內綁定<a href="http://www.createjs.cc/easeljs/docs/classes/Stage.html" target="_blank">Stage</a>類的<a href="http://www.createjs.cc/easeljs/docs/classes/Stage.html#event_stagemousemove" target="_blank">stagemousemove</a>與<a href="http://www.createjs.cc/easeljs/docs/classes/Stage.html#event_stagemouseup" target="_blank">stagemouseup</a>， <div class="cnblogs_code"> <pre> circle.addEventListener('mousedown', function(e) { stage.addEventListener('stagemousemove', function(e) { circle.x = stage.mouseX; circle.y = stage.mouseY; }); stage.addEventListener('stagemouseup', function(e) { e.target.removeAllEventListeners(); }); });</pre> </div> <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160416164115207-972669928.gif" alt="" data-pinit="registered" /> 完整的代碼可以在<a href="http://codepen.io/strick/pen/LNmRLp" target="_blank">這里查看</a>，e.target就是canvas對象，內容如下： <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160416163923504-1962365740.jpg" alt="" data-pinit="registered" /> Stage類中全部事件如下： <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160416164249223-994115476.jpg" alt="" data-pinit="registered" />   <h1>二、顏色拖放小游戲</h1> 可以通過上面這些事件制作一個簡單的顏色拖放小游戲，詳細的代碼可以<a href="http://codepen.io/strick/pen/bpMwoL" target="_blank">查看這里</a>。 <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160417103359504-233523852.gif" alt="" data-pinit="registered" /> 下面是一個片段： <div class="cnblogs_code"> <pre> 1 function startDrag(e) { 2 var shape = e.target; 3 var slot = slots[shape.key]; 4 stage.setChildIndex(shape, stage.getNumChildren() - 1); 5 stage.addEventListener('stagemousemove', function(e) { 6 shape.x = e.stageX; 7 shape.y = e.stageY; 8 }); 9 stage.addEventListener('stagemouseup', function(e) { 10 stage.removeAllEventListeners(); 11 var pt = slot.globalToLocal(stage.mouseX, stage.mouseY); 12 if (slot.hitTest(pt.x, pt.y)) { 13 shape.removeEventListener("mousedown", startDrag); 14 score++; 15 createjs.Tween.get(shape).to({ 16 x: slot.x, 17 y: slot.y 18 }, 200, createjs.Ease.quadOut).call(checkGame); 19 console.log('h'); 20 } else { 21 createjs.Tween.get(shape).to({ 22 x: shape.homeX, 23 y: shape.homeY 24 }, 200, createjs.Ease.quadOut); 25 } 26 }); 27 }</pre> </div>   1）事件中的e Shape類中的 <a href="http://www.createjs.cc/easeljs/docs/classes/Stage.html#event_stagemousemove" target="_blank">stagemousemove</a>和<a href="http://www.createjs.cc/easeljs/docs/classes/Stage.html#event_stagemouseup" target="_blank">stagemouseup</a>事件內的參數“e”是一個<a href="http://www.createjs.cc/easeljs/docs/classes/MouseEvent.html" target="_blank">MouseEvent</a>對象，“stageX”與“stageY”指的是鼠標在畫布上的位置。   2）setChildIndex Stage類中的<a href="http://www.createjs.cc/easeljs/docs/classes/Stage.html#method_setChildIndex" target="_blank">setChildIndex</a>這個應該與CSS中的“z-index”類似，就是為了不被覆蓋住，拖動黃色塊的時候，能將靜止的塊覆蓋。 <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160417104712738-828765264.jpg" alt="" data-pinit="registered" />   3）globalToLocal Shape類中<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#method_globalToLocal" target="_blank">globalToLocal</a>方法是做坐標轉換，上面的代碼是將鼠標的X和Y坐標轉換相對于圖形的坐標。 <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160417110225363-1220611741.jpg" alt="" data-pinit="registered" /><img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160417110316816-21813444.jpg" alt="" data-pinit="registered" /><img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160417110345770-874921652.jpg" alt="" /> 第一張圖中：藍色邊框左上角的點相對畫布原點是(50,30) 第二張圖中：將鼠標移動到了(0,8)的位置 第三張圖中：a就是經過計算后坐標點(0-50,8-30)   4）hitTest <a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html#method_hitTest" target="_blank">hitTest</a>測試圖像是否與顏色相同的框有交集，并且交集要過了邊框的中心點才返回true。 <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160417114608879-215030636.jpg" alt="" data-pinit="registered" /><img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160417114724723-1589096880.jpg" alt="" data-pinit="registered" /> 第一張圖：過了中心點；第二張圖：是沒過中心點   <h1>三、Text</h1> 1）創建文本 在Canvas上可以畫出文字，在CreateJS中同樣可以，并且還封裝了很多方法，將會使用<a href="http://www.createjs.cc/easeljs/docs/classes/Text.html" target="_blank">text</a>類。 <div class="cnblogs_code"> <pre>var text = new createjs.Text("Game Over", "20px Arial", "#ff7700"); text.textBaseline = "middle"; text.textAlign = "center"; stage.addChild(text);</pre> </div> 完整的代碼可以在<a href="http://codepen.io/strick/pen/GZdvzO" target="_blank">這里查看</a>。通過畫字，就可以模擬超鏈接了，還能把“:hover”通過事件模擬出來。 <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160417121315691-557833074.jpg" alt="" />   2）DOMElement類 CreateJS還能將canvas外面的DOM元素添加進來，完整的代碼可以在<a href="http://codepen.io/strick/pen/yOjowr" target="_blank">這里查看</a>。 <div class="cnblogs_code"> <pre><div id="gameHolder"> <div id="instructions" style="width: 400px;height: 300px;border: dashed 2 #008b8b;text-align: center;visibility: hidden"> <h3 style="font-family:arial;">Game Instructions</h3> <p><strong>Click</strong> on the <span style="color:red">RED</span> balloons as they fall from the sky.</p> <a href="http://www.cnblogs.com/strick/" target="_blank">pwstrick</a> </div> <canvas id="canvas" width="500" height="400" style="border: black solid 1px"></canvas> </div></pre> </div> 與上面的創建文本類似，也是初始化后，添加多個屬性。 <div class="cnblogs_code"> <pre>var de = new createjs.DOMElement(instructions); de.alpha = 0; de.regX = 200; stage.addChild(de);</pre> </div> <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160417122740785-806085166.gif" alt="" data-pinit="registered" />  </div><div id="MySignature"></div> <div class="clear"></div> <div id="blog_post_info_block"> <div id="BlogPostCategory"></div> <div id="EntryTag"></div> <div id="blog_post_info"> </div> <div class="clear"></div> <div id="post_next_prev"></div> </div>