경량 자바스크립트 라이브러리 createjs는 Easel을 사용하여 드래그 앤 드롭 효과를 구현합니다.javascript 기술
- WBOY원래의
- 2016-05-16 15:14:402018검색
Createjs를 배우면서 얻은 경험을 여러분과 공유하겠습니다.
1. CreateJS란 무엇인가요?
Createjs는 풍부한 대화형 경험을 갖춘 HTML5 게임을 구축할 수 있는 경량 자바스크립트 라이브러리이자 오픈 소스 툴킷입니다. createjs를 사용하면 많은 흥미로운 애니메이션 게임을 구축할 수 있습니다. 예를 들어, 긴장한 고양이를 둘러싸고 당신이 얼마나 다채로운지 확인하고 다른 Html5 게임을 즐겨보세요.
2. CreateJS의 도구는 무엇인가요?
createjs에는 네 가지 주요 엔진이 있습니다.
- EaselJS: 주로 애니메이션, 벡터 및 비트맵 그리기에 사용됩니다. 모바일 장치에서 터치를 지원하는 일련의 메서드를 제공합니다(click, mousedown, pressup 및 pressmove는 각각 마우스 클릭, 누르기, 놓기 및 이동에 대한 이벤트이지만 createjs.Touch.enable(
- TweenJS: 지속적으로 변화하는 효과를 생성할 수 있는 트윈 애니메이션을 만드는 엔진입니다. (플래시를 사용해 본 아이들은 트윈 애니메이션이 무엇인지 알아야 합니다)
- SoundJS: 브라우저 호환성 및 성능에 따라 재생할 오디오 형식을 선택할 수 있고 언제든지 로드 및 언로드할 수 있는 오디오 재생 엔진입니다.
- PreloadJS: 리소스 사전 로딩 엔진으로, 로딩 순서를 지정하고 우선순위 그룹별로 리소스를 로딩할 수도 있습니다.
3. 이젤을 사용하여 간단한 드래그 앤 드롭을 만드는 방법은 무엇입니까?
따라서 이제 EaselJs를 사용하여 사진을 임의로 드래그해야 하고 사진을 클릭하여 사진을 선택하거나 선택 취소해야 하는 경우 선택 상태는 드래그할 수 있다는 의미이고 선택 취소 상태는 드래그할 수 없는 상태를 의미합니다. . 그리고 최대 한 장의 사진이 드래그 상태에 있을 수 있습니다. 그렇다면 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으로 문의하세요.