H5移动端 实现图片缩放拖动（hammerjs)

在做Cordova+vue项目的时候，有需求是可以放大缩小以及拖动图片的功能，就类似于手机图库里面自带的缩放等功能。经查询可以使用hammerjs来做。
说到缩放，大家可能会想到的是使用transform:scale(x,y)进行对元素的缩放。
但是对于手势缩放的过程中，我们需要在进行缩放的同时，保证双指之间的中心点一直保持在原来的位置，这时我们需要配合使用translate(x,y)来进行位置的调整。但如何计算得到translate(x,y)中的值呢？
参考如下：
hammerjs官方文档
css3 transform中的matrix矩阵

scale.js

import Hammer from 'hammerjs'// 引用hammerjs
import Vue from 'vue'
// 定义缩放方法，接收一个element参数：使用export暴露该方法
export function zoomElement (el) {
  function point2D (x, y) {
    return { x: x, y: y }
  }
  // 判断 正数，负数，不是数字
  function checkNumType (num) {
    var reg = new RegExp("^-?[0-9]*.?[0-9]*$")
    if (reg.test(num)) { // 用于检测一个字符串是否匹配某个模式
      var absVal = Math.abs(num) // 如果参数是非负数，则返回该参数；如果参数是负数，则返回该参数的相反数。
      return num == absVal ? true : false
    } else {
      console.log('this is not number')
    }
  }
  function exChangeNum (num, reNum) {
    let flag = checkNumType(num)
    let reFlag = checkNumType(reNum)
    let realNum = 0
    if (!flag && reFlag) {
      realNum = Numbe