快捷導(dǎo)航

javascript輕量級(jí)庫createjs使用Easel實(shí)現(xiàn)拖拽效果

更新時(shí)間：2016年02月19日 09:22:00 作者：Jolly2015

這篇文章主要介紹了javascript輕量級(jí)庫createjs使用Easel實(shí)現(xiàn)拖拽效果的相關(guān)資料,需要的朋友可以參考下

我就把我學(xué)習(xí)Createjs的一些心得體會(huì)向大家分享下：

一.什么是CreateJS?

　　createjs是一個(gè)輕量級(jí)的javascript庫，是一套可以構(gòu)建豐富交互體驗(yàn)的 HTML5 游戲的開源工具包，利用createjs可以構(gòu)建出許多有趣的動(dòng)畫游戲。例如圍住神經(jīng)貓，看你有多色等Html5游戲。

二.CreateJS有哪幾款工具？

createjs里面共有四大引擎:

EaselJS:主要用于動(dòng)畫、向量及位圖的繪制。提供支持移動(dòng)設(shè)備觸控的一系列方法(click、mousedown、pressup、pressmove分別為鼠標(biāo)點(diǎn)擊、按下、松開以及移動(dòng)的事件,不過在之前要加上createjs.Touch.enable(<舞臺(tái)對(duì)象>))。
TweenJS:是一個(gè)制作補(bǔ)間動(dòng)畫的引擎，可生成一種連續(xù)變化的效果。(用過flash的童鞋應(yīng)該知道什么是補(bǔ)間動(dòng)畫哈)
SoundJS:是一個(gè)音頻播放的引擎，可根據(jù)瀏覽器兼容性及性能選擇音頻格式播放，可隨時(shí)加載和卸載。
PreloadJS:是一個(gè)資源預(yù)加載的引擎，還可以指定加載順序及按優(yōu)先級(jí)分組加載資源。

三.如何利用Easel制作一個(gè)簡單的拖拽？

　　那么假如現(xiàn)在需要用EaselJs實(shí)現(xiàn)可任意拖拽一張圖片，并通過單擊該圖片使圖片處于選中或未選中狀態(tài)，選中狀態(tài)即為可拖拽狀態(tài)，未選中狀態(tài)即為不可拖拽狀態(tài)。且最多有一張圖片可以處于拖拽狀態(tài)。那么如何利用EaselJs實(shí)現(xiàn)這個(gè)需求且支持移動(dòng)端設(shè)備呢？廢話不多說，上源碼。

　　HTML代碼：

<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); //允許設(shè)備觸控
      var selectBool = []; //控制狀態(tài)
      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();
          });
          //        添加鼠標(biāo)"松開"事件
          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();
          });

          //        切換狀態(tài)方法
          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;
          }
          //        圖片拖動(dòng)
          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>

由于瀏覽器的同源策略，需要開一個(gè)本地服務(wù)器，否則無法正常加載。好了，這就是上述所要求的圖片拖拽效果啦

您可能感興趣的文章: