Createjs学习心得之使用EaselJs实现拖拽效果_H5之家

> WEB开发 > JavaScript > 正文

编程大巴

Createjs学习心得之使用EaselJs实现拖拽效果

作者：发布日期：2016-02-19 21:13:36

Tag标签：心得效果

　　寒假时跟着老师在做一个createjs+angularjs的html5应用app，因为在这之前完全没了解过createjs这个框架，所以在查找资料时发现，国外官网()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>

由于浏览器的同源策略，需要开一个本地服务器，否则无法正常加载。好了，这就是上述所要求的图片拖拽效果啦。细心的童鞋在自己写时会发现里面的闭包问题哦。代码为原创，转载请注明出处，尊重原创，谢谢咯。也欢迎大牛们多多指教！！！　