基於Taro開發小程序筆記--05小程序圖片放大組件

應用場景： 當圖片文字太小，需要觸摸手動放大顯示。

• 組件js

import Taro from '@tarojs/taro'
import {Image} from '@tarojs/components'
export default class ScaleImage extends Taro.Component {
  constructor() {
    super(...arguments)
    this.state = {
      offsetX: 0,
      offsetY: 0,
      zoom: false,
      distance: 0,
      scale: 1
    }
    this.startX = 0;
    this.startY = 0;
  }

  render() {
    let {scale} = this.state;
    let {imageSrc} = this.props;
    return (
      <Image
        src={imageSrc}
        mode='widthFix'
        ontouchstart={this.touchStart.bind(this)}
        ontouchmove={this.touchMove.bind(this)}
        ontouchend={this.touchEnd.bind(this)}
        style={{width: 100 * scale + '%'}}
      />
    )
  }

  touchStart(e) {
    if (e.touches.length == 1) {
      let {clientX, clientY} = e.touches[0];
      this.startX = clientX;
      this.startY = clientY;
    } else {
      let xMove = e.touches[1].clientX - e.touches[0].clientX;
      let yMove = e.touches[1].clientY - e.touches[0].clientY;
      let distance = Math.sqrt(xMove * xMove + yMove * yMove);
      this.setState({
        distance,
        zoom: true,
      })
    }
  }

  // 觸摸移動事件
  touchMove(e) {
    if (e.touches.length == 1) {
      //單指移動,縮放狀態，不處理單指
      if (this.state.zoom) {
        return;
      }
      let {clientX, clientY} = e.touches[0];
      let newoffsetX = clientX - this.startX;
      let newoffsetY = clientY - this.startY;
      this.startX = clientX;
      this.startY = clientY;
      let {offsetX, offsetY, offsetLeftX, offsetLeftY} = this.state;
      offsetX += newoffsetX;
      offsetY += newoffsetY;
      offsetLeftX = -offsetX;
      offsetLeftY = -offsetY;
      this.setState({
        offsetX, offsetY, offsetLeftX, offsetLeftY
      });
    } else {
      //雙指縮放
      let xMove = e.touches[1].clientX - e.touches[0].clientX;
      let yMove = e.touches[1].clientY - e.touches[0].clientY;
      let distance = Math.sqrt(xMove * xMove + yMove * yMove);
      let distanceDiff = distance - this.state.distance;
      let newScale = this.state.scale + 0.005 * distanceDiff;
      // 縮放比例設置
      if (newScale <= 2.5 && newScale >= 1) {
        this.setState({
          distance,
          scale: newScale,
        })
      }
    }
  }

  // 觸摸結束事件,重置縮放狀態
  touchEnd(e) {
    if (e.touches.length == 0) {
      this.setState({
        zoom: false
      })
    }
  }
}

• 組件的使用

import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
import ScaleImage from 'scaleImage'
import imgRate from 'images/ratesTable.png'

export default class ArticlePage extends Taro.Component {
  config = {
    navigationBarTitleText: '圖片放大'
  }

  render() {
    return (
      <View style='overflow:auto;'>
        <ScaleImage imageSrc={imgRate}/>
      </View>
    )
  }
}