軽量 JavaScript ライブラリ createjs は Easel を使用してドラッグアンドドロップ効果を実現します

軽量 JavaScript ライブラリ createjs は Easel を使用してドラッグアンドドロップ効果を実現します_JavaScript スキル

WBOY

リリース： 2016-05-16 15:14:40

オリジナル

1999 人が閲覧しました

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>
ログイン後にコピー

ブラウザの同一オリジンポリシーにより、ローカルサーバーを開く必要があります。そうしないと正常にロードできません。さて、これが上記で必要な画像のドラッグ効果です