<template>
  <view class="container flex flex-row items-center justify-center">
    <image
      class="w-1/2"
      mode="aspectFit"
      src="https://lupic.cdn.bcebos.com/20200412/3026529107_14_800_566.jpg"
      v-finger:pinch="handlePinch"
      v-finger:multipoint-start="handlePinchStart"
      :style="{ transform: `scale(${scale})` }"
      id="image"
    ></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      initScale: 1,
      scale: 1,
      element: null,
    };
  },

  mounted() {
    this.element = document.getElementById('image');
  },

  methods: {
    handlePinchStart() {
      console.log(this.element.style.transform);
      // eslint-disable-next-line no-useless-escape
      const reg = /scale\(([0-9]*[\.]?[0-9]*)\)/gi;
      const scale = this.element.style.transform;
      if (reg.test(scale)) {
        this.initScale = RegExp.$1;
        console.log(this.initScale);
      }
      // this.scale = this.element.scaleX;
    },

    handlePinch(event) {
      console.log(typeof event.zoom, typeof this.initScale, this.initScale);
      this.scale = this.initScale * event.zoom;
      console.log('this.scale:', this.scale);
    },
  },
};
</script>
