微信小程序,图片双指放大缩小
不说废话,直接上代码,复制到项目改就完事了
wxml代码
<!--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="https://image.91betterwei.com/maoshan/jingquMap.png" style="width:{{scaleWidth }}px;height:{{scaleHeight}}px" bindload="imgload"></image></scroll-view></view>
</view>
js代码
//index.js
Page({/*** 页面的初始数据*/data: {distance: 0, // 手指移动的距离scale: 1, // 缩放比例baseWidth: '', // 图片实际宽度baseHeight: '', // 图片实际高度initWidth: '', // 图片默认显示宽度initHeight: '', // 图片默认显示高度scaleWidth: '', // 图片缩放后的宽度scaleHeight: '', // 图片缩放后的高度},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 获取屏幕宽度this.width = wx.getSystemInfoSync().windowWidth;},/*** 监听图片加载成功时触发*/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倍};// 最小缩放到1if (newScale <= 1) {newScale = 1;};let scaleWidth = newScale * this.data.initWidth;let scaleHeight = newScale * this.data.initHeight;this.setData({distance: distance,scale: newScale,scaleWidth: scaleWidth,scaleHeight: scaleHeight,diff: distanceDiff});},/*** 计算两个手指距离*/calcDistance(pos0, pos1) {let xMove = pos1.clientX - pos0.clientX;let yMove = pos1.clientY - pos0.clientY;return (Math.sqrt(xMove * xMove + yMove * yMove));}
})
微信小程序,图片双指放大缩小相关推荐
- 微信小程序点击放大图片
微信小程序点击放大图片 在做微信小程序的时候遇到了这个点击放大的事件,这里记录一下 checkmap:function(e){var imageurl=this.data.mapimagesrc;co ...
- 微信小程序实现双指缩放图片功能
前言 本文分析怎么在微信小程序实现双指缩放图片的功能. 实现过程 1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析: <!--index.w ...
- 微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版
微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版 本教程基于 we-cropper v1.4.0,非本人同意禁止任何形的转载 we-cropper官方下载链接 效果图 一.非2d版 ...
- 微信小程序图片全屏预览组件,并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
- 微信小程序图片轮转播放
微信小程序图片轮播 步骤一:创建项目,注意创建的路径,路径中涉及到的文件最好用英文命名. 这里将项目创建在D:\SotfWare\WechatPG\test1.test1是项目的文件名.创建结束之后, ...
- 微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下 效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
- 小程序 图片上传php后台,微信小程序图片选择、上传到服务器、预览(PHP)实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用 ...
- php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览(PHP)实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用 ...
- 微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件 前言 图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章 实 ...
- 微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸 功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
最新文章
- Linux环境kafka安装
- 小米MixPath复现之旅
- 皮一皮:男生的求生欲,以及神回复...
- Intellij IDEA 提交代码到远程GitHub仓库
- CSDN粉丝解答:六月份第二期精选——简单bug处理、资料索取、编程系统设计等
- 深度学习笔记之lSTM网络
- 关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
- 三分钟掌握Go mod常用与高级操作
- android ndk 编译选项,Android NDK 对于c++的支持(mk文件内编译选项)
- 最全最新cpu显卡天梯图_2019.12月CPU和显卡性能天梯图
- 【vue】生成条形码
- 女子怨男友沉迷网游 穿性感睡衣出走被性侵
- ngx_lua常用变量参数
- 输入行数,输出一个字母回文金字塔(c语言)
- 方维互动直播系统(美女、游戏、会议、在线教育、体育、赛事直播系统)
- 推荐一首歌 - Just Another (Pete Yorn)
- 华为鸿蒙os手机版,华为鸿蒙os2.0系统正式版安装包下载-华为鸿蒙2.0系统手机版v2.0安卓版_289手游网下载...
- Navicat安装及pj
- AI 正在引领一场新型科学革命
- 查看linux centos ftp服务,Centos7开启FTP服务
热门文章
- 古有穷书生街中弄笔,今有弄潮儿网上卖字
- 如何对CAD图纸上的图形进行单独保存起来
- R语言使用cph函数和rcs函数构建限制性立方样条cox回归模型、使用rms包的Predict函数计算指定连续变量和风险比HR值的关系、可视化连续变量和风险值HR的关系
- linux下wifi连接方法
- 修改苹果自带地图中的路线颜色
- python笔记(五)
- 人工智能-搜索----启发式搜索
- 胆囊炎以及胆结石的朋友注意了
- 淘礼金解析/淘口令解析工具
- 计算机科学 投稿 邮箱,《计算机时代》期刊投稿【编辑部_邮箱_地址_怎么样_版面费_代发表】...