Vue ジェスチャ コンポーネントのチュートリアル

まえがき

最近、指でつまんだり拡大したりするジェスチャー操作が必要になり、コンポーネントをいくつか見つけたのですが、Vueに適していないものや、大きさが大きすぎるため、手書きのジェスチャーで操作することにしました。

アイデア

DOM に直接バインドする touchstart、touchmove、touchend これらのイベントをバインドする必要があるだけではありません、他のプロジェクトで再利用するのは簡単ではありません。したがって、Vue カスタム命令を使用する方が適切です。命令をプラグインにカプセル化し、npm を使用してホストすることもできるため、いつでもどこでも使用できます。

Vue カスタム命令

Vue 公式 Web サイトには、必要なキーコードを抽出したカスタム命令に関するチュートリアルがあります。

Vue.directive('pinch', {  // 只调用一次，指令第一次绑定到元素时调用
  bind (el, binding)  {    // el：指令所绑定的元素，可以用来直接操作 DOM
    // binding.value()：运行添加到指令的回调方法

  }
})复制代码

マルチタッチ

ピンチジェスチャを実現するには複数の指で操作する必要があるため、touch のマルチタッチを使用すると、複数のタッチを取得できますコントロールポイントの位置。そして、touchstart と touchend の 2 点間の距離の偏差を判断することで、ピンチ ジェスチャか拡大ジェスチャかを判断できます。キー コードは次のとおりです。

let touchFlag = false;let touchInitSpacing = 0;let touchNowSpacing = 0;

el.addEventListener('touchstart',(e)=>{    if(e.touches.length>1){
        touchFlag = true;
        touchInitSpacing = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)**2 +(e.touches[1].clientY-e.touches[1].clientY)**2);
    }else{
        touchFlag = false;
    }
});

                
el.addEventListener('touchmove',(e)=>{    if(e.touches.length>1&&touchFlag){
        touchNowSpacing = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)**2 +(e.touches[1].clientY-e.touches[1].clientY)**2);
    }
});

el.addEventListener('touchend',()=>{    if(touchFlag){
        touchFlag = false;        if(touchInitSpacing-touchNowSpacing>0){
            binding.value('pinchin');
        }else{
            binding.value('pinchout');
        }
    }
});复制代码

命令の使用

ジェスチャ ロジックを使用してカスタム命令を作成すると、それを直接使用できます。

<template>
    <p class="pinch" v-pinch="pinchCtrl"></p></template>复制代码

new Vue({  methods: {      pinchCtrl: function (e) {        
          if(e==='pinchin'){              console.log('捏合')
          }          if(e==='pinchout'){              console.log('扩大');
          }
      }
  }
})复制代码

概要

Vue カスタム命令を使用してジェスチャ操作を完了するのは複雑ではありません。同時に、ロジックをコンポーネントにカプセル化することは非常に軽量です。

コンポーネントのソース コード

完全なソース コードを表示するには、ここをクリックしてください。

このコンポーネントを使用する

このコンポーネントが役立つ場合は、npm を通じてインストールできます:

npm i vue-pinch --save复制代码

その他のコンポーネント

create-picture: Thisこのコンポーネントは、キャンバス画像描画機能とテキスト描画機能を提供し、同期構文を使用して非同期描画を完了し、ネイティブ キャンバス描画構文を簡素化します。

推奨チュートリアル: 「JS チュートリアル 」

以上がVue ジェスチャ コンポーネントのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。