• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

基于Taro开发小程序笔记--05小程序图片放大组件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

应用场景: 当图片文字太小,需要触摸手动放大显示。

  • 组件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>
    )
  }
}

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap