javascript輕量級庫createjs使用Easel實現(xiàn)拖拽效果
更新時間：2016年02月19日 09:22:00 作者：Jolly2015
這篇文章主要介紹了javascript輕量級庫createjs使用Easel實現(xiàn)拖拽效果的相關(guān)資料,需要的朋友可以參考下
我就把我學(xué)習(xí)Createjs的一些心得體會向大家分享下：
一.什么是CreateJS?
createjs是一個輕量級的javascript庫，是一套可以構(gòu)建豐富交互體驗的 HTML5 游戲的開源工具包，利用createjs可以構(gòu)建出許多有趣的動畫游戲。例如圍住神經(jīng)貓，看你有多色等Html5游戲。
二.CreateJS有哪幾款工具？
createjs里面共有四大引擎:
- EaselJS:主要用于動畫、向量及位圖的繪制。提供支持移動設(shè)備觸控的一系列方法(click、mousedown、pressup、pressmove分別為鼠標(biāo)點擊、按下、松開以及移動的事件,不過在之前要加上createjs.Touch.enable(<舞臺對象>))。
- TweenJS:是一個制作補間動畫的引擎，可生成一種連續(xù)變化的效果。(用過flash的童鞋應(yīng)該知道什么是補間動畫哈)
- SoundJS:是一個音頻播放的引擎，可根據(jù)瀏覽器兼容性及性能選擇音頻格式播放，可隨時加載和卸載。
- PreloadJS:是一個資源預(yù)加載的引擎，還可以指定加載順序及按優(yōu)先級分組加載資源。
三.如何利用Easel制作一個簡單的拖拽？
那么假如現(xiàn)在需要用EaselJs實現(xiàn)可任意拖拽一張圖片，并通過單擊該圖片使圖片處于選中或未選中狀態(tài)，選中狀態(tài)即為可拖拽狀態(tài)，未選中狀態(tài)即為不可拖拽狀態(tài)。且最多有一張圖片可以處于拖拽狀態(tài)。那么如何利用EaselJs實現(xiàn)這個需求且支持移動端設(shè)備呢？廢話不多說，上源碼。
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); //允許設(shè)備觸控
var selectBool = []; //控制狀態(tài)
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();
});
// 添加鼠標(biāo)"松開"事件
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();
});
// 切換狀態(tài)方法
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>
由于瀏覽器的同源策略，需要開一個本地服務(wù)器，否則無法正常加載。好了，這就是上述所要求的圖片拖拽效果啦
相關(guān)文章
這篇文章主要介紹了微信公眾號H5支付接口調(diào)用方法，微信內(nèi)H5調(diào)用支付接口代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
JS實現(xiàn)可關(guān)閉的對聯(lián)廣告效果代碼
這篇文章主要介紹了JS實現(xiàn)可關(guān)閉的對聯(lián)廣告效果代碼,涉及JavaScript針對滾動事件動態(tài)設(shè)置頁面元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09 
如何使用Javascript正則表達(dá)式來格式化XML內(nèi)容
本篇文章是對使用Javascript正則表達(dá)式來格式化XML內(nèi)容的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下
2013-07-07 
JS使用getComputedStyle()方法獲取CSS屬性值
經(jīng)常會用到j(luò)s來獲取元素的CSS樣式，由于方法眾多，在下面的文章中為大家詳細(xì)整理下
2014-04-04 
這篇文章主要介紹了郵箱下拉自動填充選擇的具體實現(xiàn),需要的朋友可以參考下
2014-04-04 
JavaScript中call,apply,bind的區(qū)別與實現(xiàn)
這篇文章主要介紹了JavaScript中call,apply,bind的區(qū)別與實現(xiàn),文章通過圍繞主題思想展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-09-09 
Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示
我們使用vue做項目的時候,常常需要做到echarts圖表的自適應(yīng),一般是根據(jù)頁面的寬度做對應(yīng)的適應(yīng),下面這篇文章主要給大家介紹了關(guān)于Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示的相關(guān)資料,需要的朋友可以參考下
2022-11-11 
本文主要對JavaScript中promise的使用進(jìn)行詳細(xì)介紹。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01 
js遍歷map javaScript遍歷map的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨s遍歷map javaScript遍歷map的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08