suchen

Heim  >  Artikel  >  Web-Frontend  >  Die leichte Javascript-Bibliothek createjs verwendet Easel, um Drag-and-Drop-Effekte_Javascript-Fähigkeiten zu erlangen

Die leichte Javascript-Bibliothek createjs verwendet Easel, um Drag-and-Drop-Effekte_Javascript-Fähigkeiten zu erlangen

WBOY
WBOYOriginal
2016-05-16 15:14:401985Durchsuche

Ich werde einige meiner Erfahrungen beim Erlernen von Createjs mit Ihnen teilen:

1. Was ist CreateJS?

Createjs ist eine leichte Javascript-Bibliothek und ein Open-Source-Toolkit, das HTML5-Spiele mit umfangreichen interaktiven Erlebnissen erstellen kann. Viele interessante animierte Spiele können mit createjs erstellt werden. Umgeben Sie zum Beispiel die nervöse Katze und sehen Sie, wie farbenfroh Sie und andere HTML5-Spiele sind.

2. Was sind die Tools von CreateJS?

Es gibt vier Haupt-Engines in createjs:

  • EaselJS: Wird hauptsächlich für Animationen, Vektor- und Bitmap-Zeichnungen verwendet. Bietet eine Reihe von Methoden zur Unterstützung von Berührungen auf mobilen Geräten (Klicken, Mousedown, Drücken nach oben und Drücken bewegen sind Ereignisse für Mausklick, Drücken, Loslassen bzw. Bewegen, aber createjs.Touch.enable(
  • TweenJS: ist eine Engine zum Erstellen von Tween-Animationen, die einen sich kontinuierlich ändernden Effekt erzeugen können. (Kinder, die Flash verwendet haben, sollten wissen, was Tween-Animation ist)
  • SoundJS: ist eine Audiowiedergabe-Engine, die Audioformate für die Wiedergabe basierend auf Browserkompatibilität und Leistung auswählen kann und jederzeit geladen und entladen werden kann.
  • PreloadJS: Es handelt sich um eine Engine zum Vorladen von Ressourcen. Sie kann auch die Ladereihenfolge festlegen und Ressourcen nach Prioritätsgruppe laden.

3. Wie verwende ich Easel, um ein einfaches Drag-and-Drop zu erstellen?

Wenn Sie also jetzt EaselJs verwenden müssen, um ein Bild beliebig zu ziehen, und auf das Bild klicken, um das Bild auszuwählen oder die Auswahl aufzuheben, bedeutet der ausgewählte Status, dass es gezogen werden kann, und der nicht ausgewählte Status bedeutet, dass es nicht gezogen werden kann . Und höchstens ein Bild kann sich im Drag-Zustand befinden. Wie kann man also EaselJs nutzen, um diese Anforderung zu erfüllen und mobile Geräte zu unterstützen? Kommen wir ohne weitere Umschweife zum Quellcode.

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; //定义画布大小
      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>


Aufgrund der Same-Origin-Richtlinie des Browsers muss ein lokaler Server geöffnet werden, da er sonst nicht normal geladen werden kann. Okay, das ist der oben erforderliche Bildzieheffekt

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden von Promise, um FileReader_Javascript-Fähigkeiten unter Javascript zu kapselnNächster Artikel：Verwenden von Promise, um FileReader_Javascript-Fähigkeiten unter Javascript zu kapseln

In Verbindung stehende Artikel

Mehr sehen