cari

Rumah  >  Artikel  >  hujung hadapan web  >  Pustaka javascript yang ringan createjs menggunakan Easel untuk mencapai kemahiran drag dan drop effects_javascript

Pustaka javascript yang ringan createjs menggunakan Easel untuk mencapai kemahiran drag dan drop effects_javascript

WBOY
WBOYasal
2016-05-16 15:14:401983semak imbas

Saya akan berkongsi dengan anda beberapa pengalaman saya dalam mempelajari Createjs:

1. Apakah itu CreateJS?

Createjs ialah perpustakaan javascript yang ringan dan kit alat sumber terbuka yang boleh membina permainan HTML5 dengan pengalaman interaktif yang kaya Banyak permainan animasi yang menarik boleh dibina menggunakan createjs. Sebagai contoh, kelilingi kucing yang gementar dan lihat betapa berwarna-warni anda dan permainan Html5 yang lain.

2. Apakah alatan CreateJS?

Terdapat empat enjin utama dalam createjs:

  • EaselJS: Digunakan terutamanya untuk lukisan animasi, vektor dan bitmap. Menyediakan satu siri kaedah untuk menyokong sentuhan pada peranti mudah alih (klik, turun tetikus, pressup dan pressmove masing-masing adalah peristiwa untuk klik tetikus, tekan, lepas dan pergerakan, tetapi createjs.Touch.enable(
  • TweenJS: ialah enjin untuk membuat animasi tween yang boleh menjana kesan berubah secara berterusan. (Kanak-kanak yang telah menggunakan flash harus tahu apa itu animasi tween)
  • SoundJS: ialah enjin main balik audio yang boleh memilih format audio untuk main balik berdasarkan keserasian dan prestasi penyemak imbas, serta boleh dimuat dan dipunggah pada bila-bila masa.
  • PreloadJS: Ia ialah enjin pramuat sumber Ia juga boleh menentukan susunan pemuatan dan pemuatan sumber mengikut kumpulan keutamaan.

3. Bagaimana cara menggunakan Easel untuk mencipta seret dan lepas yang mudah?

Jadi jika anda kini perlu menggunakan EaselJs untuk menyeret gambar sewenang-wenangnya, dan klik gambar untuk membuat gambar dipilih atau tidak dipilih, keadaan yang dipilih bermakna ia boleh diseret, dan keadaan tidak dipilih bermakna ia tidak boleh diseret keadaan . Dan paling banyak satu gambar boleh berada dalam keadaan menyeret. Jadi bagaimana untuk menggunakan EaselJs untuk mencapai keperluan ini dan menyokong peranti mudah alih? Tanpa berlengah lagi, mari kita ke kod sumber.

Kod 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>


Disebabkan dasar asal penyemak imbas yang sama, pelayan tempatan perlu dibuka, jika tidak, ia tidak boleh dimuatkan seperti biasa. Okey, ini ialah kesan seretan imej yang diperlukan di atas

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Menggunakan Promise untuk merangkum kemahiran FileReader_javascript di bawah javascriptArtikel seterusnya：Menggunakan Promise untuk merangkum kemahiran FileReader_javascript di bawah javascript

Artikel berkaitan

Lihat lagi