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 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
Prototype框架详解
Nov 25 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
微信小程序-API接口安全详解
Jul 16 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
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
关于手调机和数调机的选择
2021/03/02 无线电
我的论坛源代码(九)
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
Python_LDA实现方法详解
2017/10/25 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python简单实现AES加密和解密
2019/03/28 Python
Python数据库小程序源代码
2019/09/15 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
阿尔卡特(中国)的面试题目
2014/08/20 面试题
家长会学生家长演讲稿
2013/12/29 职场文书
校园活动宣传方案
2014/03/28 职场文书
个人校本研修方案
2014/05/26 职场文书
财产分割协议书范本
2014/11/03 职场文书
2015年财政所工作总结
2015/04/25 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
经营场所证明范本
2015/06/19 职场文书
二胎满月酒致辞
2015/07/29 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
python解析照片拍摄时间进行图片整理
2022/07/23 Python