preface

Recently, I needed to use finger pinching and enlarging gestures. I found several components that either didn’t fit well with Vue or were too large and decided to hand-write gestures myself.

Project and effect preview

Train of thought

Directly binding touchStart, Touchmove, and TouchEnd to the DOM not only binds these events, but also makes it difficult to reuse them in other projects. So it is better to use Vue custom instructions, instructions can also be packaged into plug-ins, and then use NPM hosting, so that you can use anytime, anywhere.

Vue custom command

The official website of Vue has a tutorial on custom instructions, which extracts the key code we need.

Vue.directive('pinch', {
  // Only called once, when the directive is first bound to the element
  bind (el, binding)  {
    // el: the element bound by the directive that can be used to manipulate the DOM directly
    // binding.value() : Runs the callback method added to the directive}})Copy the code

multi-touch

Kneading gestures must be performed with multiple fingers, so the position of multiple touch points can be obtained by using the multi-touch of touch. By judging the distance deviation between two points before touchstart and touchend, we can judge whether it is kneading gesture or magnifying gesture. The key codes are as follows:

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'); }}});Copy the code

Use instruction

The gesture logic is written into custom instructions and can be used directly.

<template>
    <div class="pinch" v-pinch="pinchCtrl"></div>
</template>
Copy the code
new Vue({
  methods: {
      pinchCtrl: function (e) {        
          if(e==='pinchin') {console.log('knead')}if(e==='pinchout') {console.log('expanding'); }}}})Copy the code

conclusion

Using Vue custom instructions to perform gestures is not complicated, and encapsulating the logic as a component is lightweight.

Component source

See the full source code here.

Using this component

If this component helps you, you can install it via NPM:

npm i vue-pinch --save
Copy the code

More components

Create-picture: This component provides canvas picture drawing and text drawing functions, using synchronous syntax to complete asynchronous drawing, simplifying the native Canvas drawing syntax.

More articles

  • Check out more of my articles: github.com/ningbonb/bl…
  • Check out other articles of netease Creative Department: github.com/f2e-netease…