javascript Lightweight library createjs uses Easel for drag and drop effects

  • 2020-12-22 17:34:01
  • OfStack

I would like to share with you some of my experience in learning Createjs:

1. What is CreateJS?

createjs is a lightweight javascript library, an open source toolkit for building rich interactive HTML5 games that can be used to build many interesting animated games. For example, surround the nerve cat, see how many colors you have, Html5 games.

2. What are the tools of CreateJS?

There are four engines in the createjs:

EaselJS: Mainly used for animation, vector and bitmap drawing. 1 series of methods to support touch on mobile devices (click, mousedown, pressup, pressmove are mouse click, press, release, and move events, respectively, but add createjs.Touch.enable ( < The stage object > )). TweenJS: Is a tween animation engine that produces a continuous variation of the effect. (I should know what tween animation is after using flash's shoes.) SoundJS: Is an audio playback engine, which can be selected according to browser compatibility and performance. It can be loaded and unloaded at any time. PreloadJS: Is a pre-loaded resource engine. You can also specify the loading sequence and load resources by priority grouping.

3. How to make a simple drag and drop using Easel?

So if you want to use EaselJs to drag and drop an image at will, and click on the image to make it checked or unchecked, the checked state is drag-able, and the unchecked state is not drag-able. And up to 1 image can be drag-and-drop. So how do you leverage EaselJs to meet this requirement and support mobile devices? Without further ado, on the source code.

HTML code:


<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; // Define the canvas size 
      canvas.height = 400;
      var stage = new createjs.Stage(canvas);
      createjs.Touch.enable(stage); // Allow device touch 
      var selectBool = []; // Control state 
      drawImgs();
      stage.update();

      function drawImgs() {
        var oX = 0,
          oY = 0;
        var fzmx, fzmy, sx, sy; // Instrumental variables 
        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();
          });
          //         Add a mouse " loosen " The event 
          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();
          });

          //         Switching state method 
          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;
          }
          //         Drag image 
          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>


Due to the same-origin policy of the browser, a local server needs to be opened, otherwise it cannot be loaded normally. Okay, so that's the image drag effect


Related articles: