javascript轻量级库createjs使用Easel实现拖拽效果


Posted in Javascript onFebruary 19, 2016

我就把我学习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>

由于浏览器的同源策略,需要开一个本地服务器,否则无法正常加载。好了,这就是上述所要求的图片拖拽效果啦

Javascript 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
UI Events 用户界面事件
Jun 27 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
JavaScript中this详解
Sep 01 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 #Javascript
谈一谈javascript中继承的多种方式
Feb 19 #Javascript
多种js图片预加载实现方式分享
Feb 19 #Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 #Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 #Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 #Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 #Javascript
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
外科实习自我鉴定
2013/10/06 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
员工拓展培训方案
2014/02/15 职场文书
大型活动组织方案
2014/05/10 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
2016新年慰问信范文
2015/03/25 职场文书
公司处罚决定书
2015/06/24 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript