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:
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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
