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                         } 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>

 

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

     

 

你可能感兴趣的:(Createjs学习心得之使用EaselJs实现拖拽效果)