javascript轻量级库createjs使用Easel实现拖拽效果

内容摘要
我就把我学习Createjs的一些心得体会向大家分享下：
一.什么是CreateJS?
　　createjs是一个轻量级的javascript库，是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，
文章正文

我就把我学习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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
 
<head>
  <meta charset="utf-8">
  <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
  <script type="text/javascript">
    function Init() {
      var canvas = document.getElementById("dragCanvas");
      canvas.width = 600; //定义画布大小
      canvas.height = 400;
      var stage = new createjs.Stage(canvas);
      createjs.Touch.enable(stage); //允许设备触控
      var selectBool = []; //控制状态
      drawImgs();
      stage.update();
 
      function drawImgs() {
        var oX = 0,
          oY = 0;
        var fzmx, fzmy, sx, sy; //辅助变量
        for (var i = 0; i < 4; i++) {
          var randomColor = Math.floor(Math.random() * 16777215).toString(16);
          var con = new createjs.Container();
          var bitmap = new createjs.Bitmap(i + '.jpg');
          selectBool[i] = false;
          con.x = oX;
          con.y = oY;
          oX += 125;
          con.addChild(bitmap);
          con.addEventListener("mousedown", function (event) {
            var Mindex = stage.getChildIndex(event.target.parent);
            sx = event.stageX;
            sy = event.stageY;
            fzmx = event.stageX - event.target.parent.x;
            fzmy = event.stageY - event.target.parent.y;
            if (selectBool[Mindex]) {
              event.target.parent.addEventListener('pressmove', pressMove, false);
            } else {
              event.target.parent.removeEventListener('pressmove', pressMove, false);
            }
            stage.update();
          });
          //        添加鼠标"松开"事件
          con.addEventListener("pressup", function (event) {
            var Pindex = stage.getChildIndex(event.target.parent);
            if (Math.abs(event.stageX - sx) < 3 && Math.abs(event.stageY - sy) < 3) {
              selectBool[Pindex] = !selectBool[Pindex];
              shadowUr(selectBool[Pindex], event.target.parent, randomColor);
            }
            stage.update();
          });
 
          //        切换状态方法
          function shadowUr(bool, con, randomColor) {
            if (bool) {
              con.shadow = new createjs.Shadow("#" + randomColor, 0, 0, 10);
              var fIndex = con.parent.getChildIndex(con);
              for (var i = 0; i < con.parent.numChildren; i++) {
                if (i == fIndex)
                  continue;
                con.parent.getChildAt(i).shadow = null;
                selectBool[i] = false;
              }
            } else
              con.shadow = null;
          }
          //        图片拖动
          function pressMove(event) {
            var self = event.target.parent;
            if (event.stageX - fzmx < 0)
              self.x = 0;
            else if (event.stageX - fzmx + self.getBounds().width > stage.canvas.width)
              self.x = stage.canvas.width - self.getBounds().width;
            else
              self.x = event.stageX - fzmx;
            if (event.stageY - fzmy < 0)
              self.y = 0;
            else if (event.stageY - fzmy + self.getBounds().height > stage.canvas.height)
              self.y = stage.canvas.height - self.getBounds().height;
            else
              self.y = event.stageY - fzmy;
            stage.update();
          }
          stage.addChild(con);
        }
 
      }
    }
  </script>
</head>
 
<body onload="Init();">
  <canvas id="dragCanvas" style="border:#333 1px solid"></canvas>
</body>
 
</html>


由于浏览器的同源策略，需要开一个本地服务器，否则无法正常加载。好了，这就是上述所要求的图片拖拽效果啦
代码注释
上一篇PHP删除指定目录中的所有目录及文件的方法下一篇安卓输入框被虚拟键盘挡住的问题(微信开发)

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！