「毎週1時canvasアニメーション」-ユーザーインタラクション

9628 ワード
canvas html httml 5 javascript
ユーザーインタラクションはcanvasアニメーションを学ぶ上でまず身につけなければならない部分かもしれません.結局、インタラクティブな入力やアニメーションへのダイナミックな入力がなければ、映画を見るのと何が違うのでしょうか.ユーザインタラクションは、イベントに基づいて、一般に、 、 および を含む.
1、イベントとイベント実行
イベントを理解する前に、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にイベントを追加して削除する実験を行います

  
  
   
       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)
       }

コンソールに「mouse down」が印刷されるかどうかを見ることができます.
2.マウスイベント
マウスイベントは、次のように分類されます.
  • mousedown
  • mouseup
  • click
  • dbclick
  • mousewheel
  • mouseover
  • mouseout

    • 各マウスイベントには、現在のマウスの位置を決定する2つのプロパティが含まれています:pageXおよびpageYです.pageXおよびpageYおよびcanvas要素のオフセット位置により、マウスがcanvas要素のどの位置にあるかを算出することができる.異なるブラウザの互換性を考慮するために、念のためclientXとclientYを使用することができます.ここでは、**utils.js**という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の位置を取得することができます.具体的なコードは以下の通りです.
        
           
    you browser not support canvas!
    
       
    
       
       
           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);
              });

    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);

    3、キーボードイベント
    キーボードイベントは2つだけです.
  • keydown
  • keyup

    • マウスイベントをバインドするようにcanvasにキーボードイベントをバインドすることもできます.よし!次に、キーボードイベントをwindow(canvasに直接バインドしないのはなぜですか?考えてみましょう)にバインドする方法を見てみましょう.
    
    
          
    
   
       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)；
       }

    マウスの方向キーを押すと、コンソールに適切な情報が印刷されているかどうかを試してみましょう.
    4、タッチイベント
    タッチイベントには、次の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とインタラクティブなユーザーのさまざまなイベントについて説明します.重要なのは、自分のツール関数ファイルに次の2つの方法が含まれているはずです.utils.captureTouchとutils.captureMouseの2つの方法は、canvas要素に対する現在の位置を取得するためです.私たちは後の章で頻繁に使用します.もちろん、この2つの方法に加えて、私たちが使用しているrequestAnimationFrame方法も互換性の問題に関連しているため、私たちはそれをutils.jsに一緒に追加します.具体的なコードはutils.jsファイルを参照してください.次節では、三角関数の座標回転をお楽しみに!!!
    matlab-分水嶺アルゴリズム処理画像分割(分水嶺アルゴリズムで米粒を分割)
    jsは画像をクライアントコンピュータに自動的にダウンロードすることを実現する