寒假时跟着老师在做一个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='/images/loading.gif' data-original="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 } else66 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 else76 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 else82 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>
由于浏览器的同源策略，需要开一个本地服务器，否则无法正常加载。好了，这就是上述所要求的图片拖拽效果啦。细心的童鞋在自己写时会发现里面的闭包问题哦。代码为原创，转载请注明出处，尊重原创，谢谢咯。也欢迎大牛们多多指教！！！
原标题：Createjs学习心得之使用EaselJs实现拖拽效果
关键词：JS
我知道了 