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 相关文章推荐
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
谈谈JavaScript中的函数
Sep 08 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
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
php单例模式示例分享
2015/02/12 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
简述Python中的进程、线程、协程
2016/03/18 Python
说一说Python logging
2016/04/15 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
python实现浪漫的烟花秀
2019/01/30 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
服务生自我鉴定
2014/01/22 职场文书
企业申诉管理制度
2014/01/30 职场文书
初中生自我评价
2014/02/01 职场文书
写字楼租赁意向书
2014/07/30 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
学校捐款活动总结
2015/05/09 职场文书
文艺演出主持词
2015/07/01 职场文书