《每周一点canvas动画》——用户交互

时间 2019-11-06

标签每周一点canvas动画用户交互繁體版

原文原文链接

用户交互也许是咱们学习canvas动画中首先须要掌握的部分。毕竟，若是没有交互或者向动画中作一些动态的输入，那么这跟看电影有什么区别呢？用户交互基于事件，通常来讲包括：鼠标事件，触摸事件和键盘事件。canvas

一、事件和事件执行

在理解事件以前，你须要明白什么是listener和handler。
listener(即监听器)决定当一个事件发生时是否作出反应。handler(即执行者)是一个函数，当事件发生时被调用。好了，扯了这么多直接上代码：浏览器

element.addEventListener(type, handler[, useCapture]);

    type: 事件类型
    handler: 事件执行函数
    useCapture: 可选，为布尔值false/true, 表示在冒泡/捕获阶段执行

经过方法addEventListener来为某一元素添加事件，具体到咱们的canvas上是什么样的呢？加入咱们如今想要在canvas上绑定一个mousedown事件，具体代码以下：函数

canvas.addEventListener('mousedown', function(event){
        console.log("Mouse pressed on element");
    }, false)

这样咱们就为canvas绑定了鼠标点击事件，当在canvas上按下鼠标是就会在控制台看到打印出 "Mouse pressed on element"。工具

那么既然有添加事件(addEventListener)，就有移除事件(removeEventListener)，使用方式与添加事件几乎彻底同样：学习

element.removeEventListener(type, handler[, useCapture]);
    type: 事件类型
    handler: 事件执行函数
    useCapture: 可选，为布尔值false/true, 表示在冒泡/捕获阶段执行

惟一须要注意的是handler,即移除事件的函数，这里只能写函数名，而不能像添加事件同样将整个功能函数所有写入。也就是说，在添加某个事件的时候，咱们能够将须要执行的函数写在事件监听以外并命名，这样若是你想要在后续的代码中移除该事件，直接将函数名传入移除事件的handler中便可。动画

如今让咱们来实验下先为canvas添加一个事件，再将其移除code

<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script></script>
   <script>
       window.onload = function(){
           var canvas = document.getElementById('canvas');
           
           //定义的执行函数add
           function add(event){
               console.log("mouse down");
           }
           canvas.addEventListener('mousedown', add, false);
           
           //移除事件mousedown
           canvas.removeEventListener('mousedown', add, false)
       }
   </script>
</body>

如今你能够看看控制台是否还能打印出“mouse down”！对象

2.鼠标事件

鼠标事件一共能够分为：seo

mousedown事件
mouseup
click
dbclick
mousewheel
mouseover
mouseout

每个鼠标事件都包含两个属性来决定当前鼠标的位置：pageX和pageY。经过pageX和pageY，还有canvas元素的偏移位置，咱们就可以计算出鼠标具体是在canvas元素的什么位置。为了考虑不一样浏览器的兼容性，以防万一你可使用clientX和clientY。在这里，咱们建立一个js文件，名为**utils.js**,这个文件是咱们的一个工具函数，里面会逐渐加入一些咱们重复使用的方法，那么如今咱们向咱们的工具函数中添加第一个方法captureMouse,具体代码以下：

utils.js文件

    //将utils定义为window对象下的一个属性，属性值为对象
    window.utils = {};

    //在utils对象上定义捕获坐标的方法
    window.utils.captureMouse = function(element){
            //定义一个名为mouse的对象
            var mouse = {x:0,y:0};
            
            //为元素绑定mousemove事件
            element.addEventListener('mousemove',function(event){
                var x,y;
                
                //获取鼠标位于当前屏幕的位置， 并做兼容处理
                if(event.pageX||event.pageY){
                    x = event.pageX;
                    y = event.pageY;
                }else{
                    x = event.clientX + document.body.scrollLeft +document.documentElement.scrollLeft;
                    y = event.clientY + document.body.scrollTop +document.documentElement.scrollTop;
                }
                //将当前的坐标值减去元素的偏移位置，即为鼠标位于当前canvas的位置
                x -= element.offsetLeft;
                y -= element.offsetTop;

                mouse.x = x;
                mouse.y = y;
            },false);
             //返回值为mouse对象
             return mouse;
        }

这个方法将DOM元素做为参数传入，这样咱们只要将canvas传入就能够获取到鼠标在当前canvas的位置。具体代码以下：

<canvas id="canvas" width='500' height="500" style="background:#000">
           <p>you browser not support canvas!<p>
       </canvas>
       <script src='../js/utils.js'></script>
       <script>
           window.onload = function(){
              var canvas = document.getElementById('canvas'),
                  //将canvas传入，该方法会返回一个包含属性x和y的对象
                  mouse = utils.captureMouse(canvas);

              //为canvas绑定mousedown事件，当鼠标按下的时候打印出当前鼠标相对于canvas的坐标值
              canvas.addEventListener('mousedown',function(event){
                console.log("x:" +mouse.x +",y:" + mouse.y);
              });
       </script>

Have a try!!!看看可否成功。

getBoundingClientRect（）

其实，关于canvas的鼠标位置获取的方法还能够应用它自身的一个方法getBoundingClientRect，这里作一个介绍，你可使用，但本系列文章主要使用上面这种更具普遍性的方法。具体代码能够参考以下：

canvas.addEventListener('mousedown',function(event){
                       //event兼容处理
                       var event = event || window.event;
                       //兼容处理，获取当前鼠标相对屏幕的坐标
                       var winX = event.clientX+document.body.scrollLeft +document.documentElement.scrollLeft || event.pageX;
                       var winY = event.clientY+document.body.scrollTop +document.documentElement.scrollTop || event.pageY;
                       
                       //定义一个对象
                       var can = {x:0, y:0};
                       //调用getBoundingClientRect方法，该方法返回一个对象，包含canvas的left、 top、 width、 height等值
                       
                       var canBox = canvas.getBoundingClientRect();
                       
                   //（winX - canBox.left）：与上面的含义同样，是减去canvas的偏移量
                   //（canvas.width/canBox.width）：通常来讲canvas.width和canBox.width是同样的，也就是说这两个的比值为1.但不排除你会为canvas设置边框，这是实际的坐标位置就会有所变化，好比canvas.width = 500, 你可能设置了一个1px的边框，那么canBox.width = 502, 因此比值就不为1了。这样作只是让数据更精确。
                   
                       can.x = (winX - canBox.left)*(canvas.width/canBox.width);
                       can.y = (winY - canBox.top)*(canvas.height/canBox.height);
                       
                       //输出
                       console.log(can.x，can.y);
                   },false);

三、键盘事件

键盘事件就两个：

keydown
keyup

咱们一样能够向绑定鼠标事件那样为canvas绑定键盘事件。好吧！如今咱们来看看，如何将一个键盘事件绑定到window(为何不直接绑定到canvas上呢？想一想)上：

<body >
    <p>任意按下按键</p>
   <script>
       window.onload = function(){
       
              //定义键盘事件
           function onKeyboard(event){
              switch (event.keyCode){
                  case 38:
                      console.log('up!');
                      break;
                  case 40:
                      console.log('down!');
                      break;
                  case 37:
                      console.log('left!');
                      break;
                  case 39:
                      console.log('right!');
                      break;
                  default:
                      console.log(event.keyCode);
           }
        }
        //为window对象绑定键盘事件
        window.addEventListener('keydown',onKeyboard,false)；
       }
    </script>
</body>

试一试，当按下鼠标的方向键是是否在控制台打印出了相应的信息！

四、触摸事件

触摸事件包括如下3种：

touchstart
touchend
touchmove

触摸实践中，手指就充当了鼠标的做用。一样咱们最为关心的是当前触摸的位置。和captureMouse方法同样，这里在咱们的工具函数文件中，须要添加一新的方法来捕获触摸的位置，名为captureTouch,如今在utils.js文件中添加以下方法：

utils.js文件

    window.utils.captureTouch = function (element) {
      var touch = {
                      x: null,
                    y: null,
                    isPressed: false,
                    event: null
                    }；
      var body_scrollLeft = document.body.scrollLeft,
          element_scrollLeft = document.documentElement.scrollLeft,
          body_scrollTop = document.body.scrollTop,
          element_scrollTop = document.documentElement.scrollTop,
          offsetLeft = element.offsetLeft,
          offsetTop = element.offsetTop;
          
     // 绑定touchstart事件
      element.addEventListener('touchstart', function (event) {
        touch.isPressed = true;
        touch.event = event;
      }, false);
      
     // 绑定touchend事件
      element.addEventListener('touchend', function (event) {
        touch.isPressed = false;
        touch.x = null;
        touch.y = null;
        touch.event = event;
      }, false);
      
     //绑定touchmove事件
      element.addEventListener('touchmove', function (event) {
        var x, y,
            touch_event = event.touches[0]; //第一次touch

        if (touch_event.pageX || touch_event.pageY) {
          x = touch_event.pageX;
          y = touch_event.pageY;
        } else {
          x = touch_event.clientX + body_scrollLeft + element_scrollLeft;
          y = touch_event.clientY + body_scrollTop + element_scrollTop;
        }
        //剪去偏移量
        x -= offsetLeft;
        y -= offsetTop;

        touch.x = x;
        touch.y = y;
        touch.event = event;
      }, false);
      //返回touch对象
      return touch;
    };

总结

这一节主要介绍用户与canvas交互的各类事件，重要的是你应该在你本身的工具函数文件中包含了如下两个方法：utils.captureTouch和utils.captureMouse这两个方法都是为了获取当前相对于canvas元素的位置。咱们将在后面的章节中频繁使用。固然，除了这两个方法，因为咱们使用的requestAnimationFrame方法一样也涉及到兼容性的问题，咱们将它一同添加到utils.js中，具体代码请查看utils.js文件。下一节，三角函数坐标旋转敬请期待！！！