Vue 제스처 구성 요소 튜토리얼

머리말

최근에 손가락 집기 및 확장 제스처 작업을 사용해야 했는데 여러 구성 요소를 찾았지만 Vue에 적합하지 않거나 크기가 너무 커서 직접 필기 제스처 작업을 사용하기로 결정했습니다.

Idea

touchstart, touchmove, touchend를 DOM에 직접 바인딩해야 할 뿐만 아니라 이러한 이벤트도 바인딩해야 합니다. 다른 프로젝트에서도 사용됩니다. 프로젝트를 재사용하기가 쉽지 않습니다. 따라서 Vue 사용자 정의 명령어를 사용하는 것이 더 적절합니다. 명령어는 플러그인으로 캡슐화한 다음 npm을 사용하여 호스팅할 수 있으므로 언제 어디서나 사용할 수 있습니다. touchstart 、touchmove、touchend 不仅要绑定这几个事件，而且用在其他项目还不好复用。所以用 Vue 自定义指令比较合适，指令还可以封装成插件，再使用 npm 托管，这样随时随地都可以使用了。

Vue 自定义指令

Vue 官网就有 自定义指令 的教程，摘取我们需要的关键代码。

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

  }
})复制代码

多点触控

实现捏合手势，必然是多根手指操作，因此使用 touch 的多点触控，就可以拿到多个触控点的位置了。再通过判断两点 touchstart 与 touchend

Vue 사용자 정의 지침

Vue 공식 웹사이트에는 필요한 키 코드를 추출하는 사용자 정의 지침에 대한 튜토리얼이 있습니다.

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');
        }
    }
});复制代码

멀티 터치

핀치 동작을 구현하려면 여러 손가락으로 조작해야 하므로 터치의 멀티 터치를 사용하세요. 코드> 컨트롤을 이용하면 여러 터치 포인트의 위치를 ​​알 수 있습니다. 그런 다음 touchstart와 touchend 두 지점 사이의 거리 편차를 판단하여 핀치 동작인지 확대 동작인지 판단할 수 있습니다. 키 코드는 다음과 같습니다.

<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('扩大');
          }
      }
  }
})复制代码

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

요약

Vue 사용자 정의 명령을 사용하여 제스처 작업을 완료하는 것은 복잡하지 않으며 논리를 구성 요소로 캡슐화하는 것은 매우 가볍습니다.

구성 요소 소스 코드

전체 소스 코드를 보려면 여기를 클릭하세요.

이 구성 요소를 사용하세요

이 구성 요소가 도움이 된다면 npm을 통해 설치할 수 있습니다.

rrreee추가 구성 요소

create-picture: 이 구성 요소는 캔버스의 이미지 그리기 및 텍스트 그리기 기능을 제공하며 동기식 구문을 사용하여 완료합니다. 비동기 그리기를 지원하고 기본 캔버스 그리기 구문을 단순화합니다. 🎜🎜추천 튜토리얼: "🎜JS Tutorial🎜"🎜

위 내용은 Vue 제스처 구성 요소 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!