寒假時跟着老師在做一個createjs+angularjs的html5應用app，因為在這之前完全沒了解過createjs這個框架，所以在查找資料時發現，國外官網(http://www.createjs.com)API文檔雖是詳細，但對於一些英語不太好的童鞋（其實我也是一枚英語渣渣）就比較難理解了。而國內中文社區做的並不好，用戶不多，資料翻譯准確度不夠。所以在這里，我就把我學習Createjs的一些心得體會向大家分享下：
一.什么是CreateJS?
createjs是一個輕量級的javascript庫，是一套可以構建豐富交互體驗的 HTML5 游戲的開源工具包，利用createjs可以構建出許多有趣的動畫游戲。例如圍住神經貓，看你有多色等Html5游戲。
二.CreateJS有哪幾款工具？
createjs里面共有四大引擎:
EaselJS:主要用於動畫、向量及位圖的繪制。提供支持移動設備觸控的一系列方法(click、mousedown、pressup、pressmove分別為鼠標點擊、按下、松開以及移動的事件,不過在之前要加上createjs.Touch.enable(<舞台對象>))。
TweenJS:是一個制作補間動畫的引擎，可生成一種連續變化的效果。(用過flash的童鞋應該知道什么是補間動畫哈)
SoundJS:是一個音頻播放的引擎，可根據瀏覽器兼容性及性能選擇音頻格式播放，可隨時加載和卸載。
PreloadJS:是一個資源預加載的引擎，還可以指定加載順序及按優先級分組加載資源。
三.如何利用Easel制作一個簡單的拖拽？
那么假如現在需要用EaselJs實現可任意拖拽一張圖片，並通過單擊該圖片使圖片處於選中或未選中狀態，選中狀態即為可拖拽狀態，未選中狀態即為不可拖拽狀態。且最多有一張圖片可以處於拖拽狀態。那么如何利用EaselJs實現這個需求且支持移動端設備呢？廢話不多說，上源碼。
HTML代碼：
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script> 7 <script type="text/javascript"> 8 function Init() { 9 var canvas = document.getElementById("dragCanvas"); 10 canvas.width = 600; //定義畫布大小 11 canvas.height = 400; 12 var stage = new createjs.Stage(canvas); 13 createjs.Touch.enable(stage); //允許設備觸控 14 var selectBool = []; //控制狀態 15 drawImgs(); 16 stage.update(); 17 18 function drawImgs() { 19 var oX = 0, 20 oY = 0; 21 var fzmx, fzmy, sx, sy; //輔助變量 22 for (var i = 0; i < 4; i++) { 23 var randomColor = Math.floor(Math.random() * 16777215).toString(16); 24 var con = new createjs.Container(); 25 var bitmap = new createjs.Bitmap(i + '.jpg'); 26 selectBool[i] = false; 27 con.x = oX; 28 con.y = oY; 29 oX += 125; 30 con.addChild(bitmap); 31 con.addEventListener("mousedown", function (event) { 32 var Mindex = stage.getChildIndex(event.target.parent); 33 sx = event.stageX; 34 sy = event.stageY; 35 fzmx = event.stageX - event.target.parent.x; 36 fzmy = event.stageY - event.target.parent.y; 37 if (selectBool[Mindex]) { 38 event.target.parent.addEventListener('pressmove', pressMove, false); 39 } else { 40 event.target.parent.removeEventListener('pressmove', pressMove, false); 41 } 42 stage.update(); 43 }); 44 // 添加鼠標"松開"事件 45 con.addEventListener("pressup", function (event) { 46 var Pindex = stage.getChildIndex(event.target.parent); 47 if (Math.abs(event.stageX - sx) < 3 && Math.abs(event.stageY - sy) < 3) { 48 selectBool[Pindex] = !selectBool[Pindex]; 49 shadowUr(selectBool[Pindex], event.target.parent, randomColor); 50 } 51 stage.update(); 52 }); 53 54 // 切換狀態方法 55 function shadowUr(bool, con, randomColor) { 56 if (bool) { 57 con.shadow = new createjs.Shadow("#" + randomColor, 0, 0, 10); 58 var fIndex = con.parent.getChildIndex(con); 59 for (var i = 0; i < con.parent.numChildren; i++) { 60 if (i == fIndex) 61 continue; 62 con.parent.getChildAt(i).shadow = null; 63 selectBool[i] = false; 64 } 65 } else 66 con.shadow = null; 67 } 68 // 圖片拖動 69 function pressMove(event) { 70 var self = event.target.parent; 71 if (event.stageX - fzmx < 0) 72 self.x = 0; 73 else if (event.stageX - fzmx + self.getBounds().width > stage.canvas.width) 74 self.x = stage.canvas.width - self.getBounds().width; 75 else 76 self.x = event.stageX - fzmx; 77 if (event.stageY - fzmy < 0) 78 self.y = 0; 79 else if (event.stageY - fzmy + self.getBounds().height > stage.canvas.height) 80 self.y = stage.canvas.height - self.getBounds().height; 81 else 82 self.y = event.stageY - fzmy; 83 stage.update(); 84 } 85 stage.addChild(con); 86 } 87 88 } 89 } 90 </script> 91 </head> 92 93 <body onload="Init();"> 94 <canvas id="dragCanvas" style="border:#333 1px solid"></canvas> 95 </body> 96 97 </html>
由於瀏覽器的同源策略，需要開一個本地服務器，否則無法正常加載。好了，這就是上述所要求的圖片拖拽效果啦。細心的童鞋在自己寫時會發現里面的閉包問題哦。代碼為原創，轉載請注明出處，尊重原創，謝謝咯。也歡迎大牛們多多指教！！！