javascript Lightweight library createjs uses Easel for drag and drop effects
- 2020-12-22 17:34:01
- OfStack
I would like to share with you some of my experience in learning Createjs:
1. What is CreateJS?
createjs is a lightweight javascript library, an open source toolkit for building rich interactive HTML5 games that can be used to build many interesting animated games. For example, surround the nerve cat, see how many colors you have, Html5 games.
2. What are the tools of CreateJS?
There are four engines in the createjs:
EaselJS: Mainly used for animation, vector and bitmap drawing. 1 series of methods to support touch on mobile devices (click, mousedown, pressup, pressmove are mouse click, press, release, and move events, respectively, but add createjs.Touch.enable ( < The stage object > )). TweenJS: Is a tween animation engine that produces a continuous variation of the effect. (I should know what tween animation is after using flash's shoes.) SoundJS: Is an audio playback engine, which can be selected according to browser compatibility and performance. It can be loaded and unloaded at any time. PreloadJS: Is a pre-loaded resource engine. You can also specify the loading sequence and load resources by priority grouping.3. How to make a simple drag and drop using Easel?
So if you want to use EaselJs to drag and drop an image at will, and click on the image to make it checked or unchecked, the checked state is drag-able, and the unchecked state is not drag-able. And up to 1 image can be drag-and-drop. So how do you leverage EaselJs to meet this requirement and support mobile devices? Without further ado, on the source code.
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; // Define the canvas size
canvas.height = 400;
var stage = new createjs.Stage(canvas);
createjs.Touch.enable(stage); // Allow device touch
var selectBool = []; // Control state
drawImgs();
stage.update();
function drawImgs() {
var oX = 0,
oY = 0;
var fzmx, fzmy, sx, sy; // Instrumental variables
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();
});
// Add a mouse " loosen " The event
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();
});
// Switching state method
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;
}
// Drag image
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>
Due to the same-origin policy of the browser, a local server needs to be opened, otherwise it cannot be loaded normally. Okay, so that's the image drag effect