基于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={{ 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>
    )
  }
}