javascript轻量级库createjs使用Easel实现拖拽效果
作者:Jolly2015 发布时间:2024-05-22 10:41:16
标签:javascript,createjs,Easel,拖拽
我就把我学习Createjs的一些心得体会向大家分享下:
一.什么是CreateJS?
createjs是一个轻量级的javascript库,是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,利用createjs可以构建出许多有趣的动画游戏。例如围住神经猫,看你有多色等Html5游戏。
二.CreateJS有哪几款工具?
createjs里面共有四大引擎:
EaselJS:主要用于动画、向量及位图的绘制。提供支持移动设备触控的一系列方法(click、mousedown、pressup、pressmove分别为鼠标点击、按下、松开以及移动的事件,不过在之前要加上createjs.Touch.enable(<舞台对象>))。
TweenJS:是一个制作补间动画的引擎,可生成一种连续变化的效果。(用过flash的童鞋应该知道什么是补间动画哈)
SoundJS:是一个音频播放的引擎,可根据浏览器兼容性及性能选择音频格式播放,可随时加载和卸载。
PreloadJS:是一个资源预加载的引擎,还可以指定加载顺序及按优先级分组加载资源。
三.如何利用Easel制作一个简单的拖拽?
那么假如现在需要用EaselJs实现可任意拖拽一张图片,并通过单击该图片使图片处于选中或未选中状态,选中状态即为可拖拽状态,未选中状态即为不可拖拽状态。且最多有一张图片可以处于拖拽状态。那么如何利用EaselJs实现这个需求且支持移动端设备呢?废话不多说,上源码。
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>
由于浏览器的同源策略,需要开一个本地服务器,否则无法正常加载。好了,这就是上述所要求的图片拖拽效果啦


猜你喜欢
- ASP中的全角和半角转化函数,使用方法,传入要转换的字符给str即可,flag设置要转换的类型。<% Function&n
- 前2种方法主要用到了列表解析,性能稍差,而最后一种使用的时候生成器表达式,相比列表解析,更省内存列表解析和生成器表达式很相似:列表解析[ex
- 摘要在进行数据分析时,我们经常需要对DataFrame去重,但有时候也会需要只保留重复值。这里就简单的介绍一下对于DataFrame去重和取
- 改版背景创建专业的电子商务垂直搜索,以及把原有的信息聚合平台转型为在线采购批发交易平台。根据行业特点及交易需要,对原有的零批(小额批发)搜索
- 作者:Rung András原文:How To Engage Customers In Your E-Commerce Website对于我
- 汇总各种来源的数据,可以创建一个中央仓库。通过分析和汇总业务数据报告,数据仓库能够帮助企业做出明智、战略性的决策分析。虽然数据仓库提供了许多
- K线图概念股市及期货市bai场中的K线图的du画法包含四个zhi数据,即开盘dao价、最高价、最低价zhuan、收盘价,所有的shuk线都是
- 本文我们来看一下如何使用 Python 将 QQ 好友头像拼成“五一快乐”四个字。我们可以将整个实现过程分为两步:爬取 QQ 好友头像、利用
- 虽然现在的GMail已经看不到这个效果,但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress
- insert 存在即不插入语法介绍三种方式第一种:replace intoreplace into table(id, name) valu
- 因为需要一个html形式的数据统计界面,所以做了一个基于pyecharts包的可视化程序,当然matplotlib还是常用的数据可视化包,只
- easy_install 卸载通过easy_install 安装的模块可以直接通过 easy_install -m Packag
- 一、导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径):1、导出数据和表结构:mysqldump -u用户名 -
- MySQL数据库的备份有很多工具可以使用,这两天写了一个使用C#调用MYSQL的mysqldump命令完成MySQL数据库的备份与恢复的小工
- 本文实例总结了Python列表list常用内建函数。分享给大家供大家参考,具体如下:>>> x = list(range(
- 一、 [::-1]import numpy as npimport numpy as npx = np.arange(1, 6)print(
- 前言不知道大伙有没有看到过这一句话:“中国(疫苗研发)非常困难,因为在中国我们没有办法做第三期临床试验,因为没有病人了。
- 下面是asp代码实现列出sql数据库中存储过程的功能,可自行添加其它功能:< HTML >< 
- 本文实例为大家分享了python实现简单俄罗斯方块游戏的具体代码,供大家参考,具体内容如下import pygame,sys,random,
- U盘中毒了,U盘内的每个文件夹内都多了一个.lnk文件,处女座又犯了,实在不能忍,就写了个脚本把所有的.lnk文件删除了。多级目录递归删除i