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