你的位置:首页 > Java教程

[Java教程]Createjs学习心得之使用EaselJs实现拖拽效果


  寒假时跟着老师在做一个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             } 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>

 

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