ホームページ >ウェブフロントエンド >jsチュートリアル >軽量 JavaScript ライブラリ createjs は Easel を使用してドラッグ アンド ドロップ効果を実現します_JavaScript スキル
軽量 JavaScript ライブラリ createjs は Easel を使用してドラッグ アンド ドロップ効果を実現します_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:14:402018ブラウズ
Createjs を学習した私の経験の一部を共有します。
1. CreateJS とは何ですか?
Createjs は、軽量の JavaScript ライブラリであり、豊富なインタラクティブなエクスペリエンスを備えた HTML5 ゲームを構築できるオープンソース ツールキットです。createjs を使用して、多くの興味深いアニメーション ゲームを構築できます。たとえば、神経質な猫を囲んで、自分や他の Html5 ゲームがどれだけカラフルであるかを確認してください。
2. CreateJS のツールとは何ですか?
createjs には 4 つの主要なエンジンがあります:
- EaselJS: 主にアニメーション、ベクター、ビットマップの描画に使用されます。モバイル デバイスでのタッチをサポートする一連のメソッドを提供します (click、mousedown、pressup、pressmove はそれぞれマウスのクリック、プレス、リリース、移動のイベントですが、その前に createjs.Touch.enable(
- TweenJS: 継続的に変化するエフェクトを生成できるトゥイーン アニメーションを作成するためのエンジンです。 (Flash を使用したことのあるお子様は、トゥイーン アニメーションが何であるかを知っているはずです)
- SoundJS: ブラウザの互換性とパフォーマンスに基づいて再生するオーディオ形式を選択でき、いつでもロードおよびアンロードできるオーディオ再生エンジンです。
- PreloadJS: ロード順序を指定し、優先順位グループに従ってリソースをロードすることもできるリソースのプリロード エンジンです。
3. イーゼルを使用して簡単なドラッグ アンド ドロップを作成するにはどうすればよいですか?
したがって、EaselJs を使用して画像を任意にドラッグし、画像をクリックして画像を選択または選択解除する必要がある場合、選択状態はドラッグできることを意味し、非選択状態はドラッグできない状態を意味します。また、ドラッグ状態にできる画像は 1 つまでです。では、EaselJ を使用してこの要件を達成し、モバイル デバイスをサポートするにはどうすればよいでしょうか?早速、ソースコードを見てみましょう。
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>
ブラウザの同一オリジンポリシーにより、ローカルサーバーを開く必要があります。そうしないと正常にロードできません。さて、これが上記で必要な画像のドラッグ効果です
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。