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

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

WBOY

Lepaskan： 2016-05-16 15:14:40

asal

2017 orang telah melayarinya

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>
Salin selepas log masuk

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