recherche

Maison  >  Article  >  interface Web  >  La bibliothèque javascript légère createjs utilise Easel pour acquérir des compétences de glisser-déposer effect_javascript

La bibliothèque javascript légère createjs utilise Easel pour acquérir des compétences de glisser-déposer effect_javascript

WBOY
WBOYoriginal
2016-05-16 15:14:401970parcourir

Je partagerai avec vous une partie de mon expérience dans l'apprentissage de Createjs :

1. Qu'est-ce que CreateJS ?

Createjs est une bibliothèque javascript légère et une boîte à outils open source qui peut créer des jeux HTML5 avec de riches expériences interactives. De nombreux jeux animés intéressants peuvent être créés à l'aide de createjs. Par exemple, entourez le chat nerveux et voyez à quel point vous êtes coloré et d'autres jeux HTML5.

2. Quels sont les outils de CreateJS ?

Il existe quatre moteurs principaux dans createjs :

  • EaselJS : principalement utilisé pour l'animation, le dessin vectoriel et bitmap. Fournit une série de méthodes pour prendre en charge le toucher sur les appareils mobiles (click, mousedown, pressup et pressmove sont respectivement des événements pour le clic de la souris, la pression, le relâchement et le mouvement, mais createjs.Touch.enable(
  • TweenJS : est un moteur permettant de créer des animations interpolées pouvant générer un effet en constante évolution. (Les enfants qui ont utilisé Flash devraient savoir ce qu'est l'animation préadolescente)
  • SoundJS : est un moteur de lecture audio qui peut sélectionner les formats audio à lire en fonction de la compatibilité et des performances du navigateur, et peut être chargé et déchargé à tout moment.
  • PreloadJS : C'est un moteur de préchargement de ressources. Il peut également spécifier l'ordre de chargement et charger les ressources en fonction des groupes prioritaires.

3. Comment utiliser Easel pour créer un simple glisser-déposer ?

Donc, si vous devez maintenant utiliser EaselJs pour faire glisser une image arbitrairement et cliquer sur l'image pour la sélectionner ou la désélectionner, l'état sélectionné signifie qu'elle peut être déplacée, et l'état non sélectionné signifie qu'elle ne peut pas être déplacée. . Et au plus une image peut être à l'état glissé. Alors, comment utiliser EaselJs pour répondre à cette exigence et prendre en charge les appareils mobiles ? Sans plus tarder, passons au code source.

Code 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); //允许设备触控
      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>


En raison de la politique de même origine du navigateur, un serveur local doit être ouvert, sinon il ne pourra pas être chargé normalement. D'accord, c'est l'effet de glissement d'image requis ci-dessus

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utiliser Promise pour encapsuler les compétences FileReader_javascript sous javascriptArticle suivant：Utiliser Promise pour encapsuler les compétences FileReader_javascript sous javascript

Articles Liés

Voir plus