百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

微信小程序实现双指缩放图片功能 微信小程序两端对齐

bigegpt 2024-10-12 06:29 4 浏览

示例简介

本文分析怎么在微信小程序实现双指缩放图片的功能。

实现过程

1、文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看分析;

<!--index.wxml-->
<view class='wrapper'>
  <view class="container">
    <view class="title">双指缩放图片</view>
    <scroll-view class='images' scroll-y="true" scroll-x="true" bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
      <image mode="aspectFit" src="../../images/big.jpg" style="width:{{scaleWidth }}px;height:{{scaleHeight}}px" bindload="imgload"></image>
      <!-- <image mode="aspectFit" src="../../images/small.jpg" style="width:{{scaleWidth }}px;height:{{scaleHeight}}px" bindload="imgload"></image> -->
    </scroll-view>
  </view>  
</view>
/**index.wxss**/
.container {
    margin-top: 30rpx;
}


.container .title {
    margin-bottom: 20rpx;
    font-weight: bold;
}

2、文件index.js存放所有功能的逻辑代码,主要思路是先计算触摸时双指的距离(distance),然后计算移动过程的双指距离并跟触摸时的距离的差值(distanceDiff)来计算缩放比例(newScale),最后用计算出的缩放比例来缩放图片(scaleWidth和scaleHeight);代码实现如下:

1)新建公共方法calcDistance,用来计算双指的距离;

2)新建方法imgload,当图片载入完毕时获取图片实际宽度(baseWidth)和高度(baseHeight)、用来计算的固定宽度(initWidth,原图宽度大于屏幕宽度则设置为屏幕宽度,反之则设置为原图宽度)和高度(initHeight,原图宽度大于屏幕宽度则设置为原图高度/倍数,反之则设置为原图高度)、图片缩放后的宽度(scaleWidth,初始化跟initWidth一致)和高度(scaleHeight,初始化跟initHeight一致);

3)新建方法touchstartCallback,计算双指触摸时双指的距离distance;

4)新建方法touchmoveCallback,计算手指移动时双指的距离distance,跟触摸距离相减得出差值distanceDiff;然后利用差值计算出缩放比例newScale,最后使用newScale缩放图片,从而实现缩放效果。

//index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    distance: 0, // 手指移动的距离
    scale: 1, // 缩放比例
    baseWidth: '', // 图片实际宽度
    baseHeight: '', // 图片实际高度
    initWidth: '', // 图片默认显示宽度
    initHeight: '', // 图片默认显示高度
    scaleWidth: '', // 图片缩放后的宽度
    scaleHeight: '', // 图片缩放后的高度
  },
  /**
   * 监听图片加载成功时触发
   */
  imgload: function (e) {
    this.multiple = e.detail.width / this.width; // 计算原图和默认显示的倍数
    let height = this.multiple > 1 ? e.detail.height / this.multiple : e.detail.height; // 等比例计算出默认高度
    let width = this.multiple > 1 ? this.width : e.detail.width;
    this.setData({
      baseWidth: e.detail.width, // 获取图片实际宽度
      baseHeight: e.detail.height, // 获取图片实际高度
      initWidth: width,
      initHeight: height,
      scaleWidth: width,
      scaleHeight: height,
    })
  },
  /**
   * 双手指触发开始 计算开始触发两个手指坐标的距离
   */
  touchstartCallback: function (e) {
    // 单手指缩放开始,不做任何处理
    if (e.touches.length == 1) return;
    let distance = this.calcDistance(e.touches[0], e.touches[1]);
    this.setData({
      'distance': distance,
    })
  },
  /**
   * 双手指移动   计算两个手指坐标和距离
   */
  touchmoveCallback: function (e) {
    // 单手指缩放不做任何操作
    if (e.touches.length == 1) return;
    let distance = this.calcDistance(e.touches[0], e.touches[1]);
    // 计算移动的过程中实际移动了多少的距离
    let distanceDiff = distance - this.data.distance;
    let newScale = this.data.scale + 0.005 * distanceDiff;
    
    if (newScale >= this.multiple && this.multiple > 2) { // 原图比较大情况
      newScale = this.multiple;
    } else if (this.multiple < 2 && newScale >= 2) { // 原图较小情况
      newScale = 2; // 最大2倍
    };
    // 最小缩放到0.3
    if (newScale <= 0.3) {
      newScale = 0.3;
    };


    let scaleWidth = newScale * this.data.initWidth;
    let scaleHeight = newScale * this.data.initHeight;
    this.setData({
      distance: distance,
      scale: newScale,
      scaleWidth: scaleWidth,
      scaleHeight: scaleHeight,
      diff: distanceDiff
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取屏幕宽度
    this.width = wx.getSystemInfoSync().windowWidth;
  },
  /**
   * 计算两个手指距离
   */
  calcDistance(pos0, pos1) {
    let xMove = pos1.clientX - pos0.clientX;
    let yMove = pos1.clientY - pos0.clientY;
    return (Math.sqrt(xMove * xMove + yMove * yMove));
  }
})

相关推荐

Redis集群对比:主从复制、哨兵模式、Cluster一文看懂所有优缺点

在分布式系统中,Redis作为高性能的内存数据库,其集群方案的选择直接影响到系统的稳定性、可用性和扩展性。本文将全面对比Redis的三种主流集群方案:主从复制、哨兵模式和Cluster模式,帮助开发者...

redis的主从复制,读写分离,主从切换

当数据量变得庞大的时候,读写分离还是很有必要的。同时避免一个redis服务宕机,导致应用宕机的情况,我们启用sentinel(哨兵)服务,实现主从切换的功能。redis提供了一个master,多个sl...

# Redis 入门到精通(九)-- 主从复制(3)

#Redis入门到精通(九)--主从复制(3)##一、redis主从复制-常见问题(1)###1、伴随着redis系统的运行,master的数据量会越来越大,一旦master重启...

redis - 主从复制(Redis主从复制时序图)

1引言在上一篇文章中,我们了解了Redis两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AO...

# Redis 入门到精通(九)-- 主从复制(2)

#Redis入门到精通(九)--主从复制(2)##一、redis主从复制--数据同步阶段注意事项###1、数据同步阶段master说明1)如果master数据量巨大,数据同步阶段应...

Redis主从复制(redis主从复制主节点挂了)

介绍Redis有两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AOF文件恢复内存中的数据。不过...

深入解析 Redis 集群的主从复制实现方式

在互联网大厂的后端开发领域,Redis作为一款高性能的内存数据库,被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制,更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...

Redis主从架构详解(redis主从架构高可用如何实现)

Redis主从架构搭建Redis主节点配置创建主节点目录(/opt/redis-master),复制redis.conf到该目录下,redis.conf配置项修改#后台启动daemonizeyes...

抖音“四大包塘战神”:承包了全网的快乐

在抖音钓鱼垂类领域,"包塘战神"军团正掀起一场黑色幽默风暴。空军华、大表坑、李赔光、透心良四位创作者,以承包鱼塘为舞台,用连续翻车的钓鱼直播构筑起流量奇观。当钓鱼佬在抖音集体转型喜剧人...

ORACLE 11G RAC 安装-通过VM配置共享磁盘

简介:在自己的电脑上通过VM软件搭建Oracle11GRAC,通过修改VM的参数文件来实现磁盘共享!目标:搭建RAC环境实现:使用VMwareWorkstation8.0.0+ORACLE...

Linux操作系统安全配置(linux系统安全配置包括)

一、服务相关命令systemctlenable服务名#开机自启动systemctldisable服务名#禁用开机自启动systemctlstop服务名#停止服务systemctls...

关于Linux性能调优中网络I/O的一些笔记

写在前面和小伙伴分享一些Linux网络优化的笔记,内容很浅,可以用作入门博文内容结合《Linux性能优化》读书笔记整理涉及内容包括常用的优化工具(mii-tool,ethtool,ifconfig,i...

从 Sonatype Nexus Repository Manager 迁移到 Artifactory

1.Nexus1.1下载下载链接:https://help.sonatype.com/repomanager3/product-information/download/download-archiv...

Ubuntu20安装zabbix5.0企业监控系统亲测教程

前言示例主机:zabbix10.0.100.10,将安装在UbuntuServer上教程说明:因使用官方教程无法安装成功,所以本教程与官方教程有所不同安装前提:已安装UbuntuServer2...

Linux内核设计与实现—进程管理(linux内核程序设计)

进程进程就是处于执行期的程序(目标码存放在某种存储介质上)。进并不仅仅局限于一段可执行程序代码(Unix称其为代码段,textsection)。通常进程还要包含其他资源,像打开的文件,挂起的信号,...