一:小程序实现图片双指缩放介绍
1:大体思路
监听图片加载完成 给图片初始化宽高 ▶ 双手指触发开始 计算两个手指坐标的距离 ▶ 双手指移动 计算两个手指坐标和距离 ▶ 根据探测到用户的手指距离变化,确定图片缩放倍数,然后根据倍数给图片赋值新的宽高进行缩放图片。
2:需要的标签
实现图片的缩放,需要一个容器存放图片。微信为视图组件提供了 scroll-view 和 view 两种容器。图片放大的情况下是需要滑动屏幕进行查看的,所以我用了scroll-view。容器里面放的就是image标签
2:小程序实现图片双指缩放的事件
scroll-view标签上面需要两个事件:bindtouchstart (双手指触发开始事件) bindtouchmove(双指移动事件)
image标签上面绑定一个事件:bindload(微信小程序image图片加载完成监听)
二:html代码
二:css代码
page {
height: 100%;
}
.content {
height: 100%;
font-size: 0;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.images image {
text-align: center;
}
四:js代码
1:初始化变量
data: {
如果觉得《双指缩放canvas图片_小程序实现图片双指缩放》对你有帮助,请点赞、收藏,并留下你的观点哦!