欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序实现图片移动缩放效果

程序员文章站 2022-03-20 18:48:21
本文实例为大家分享了小程序实现图片移动缩放效果的具体代码,供大家参考,具体内容如下git地址 , 如果对您有帮助给个start呗尝试了movable-view标签是很方便, 但是我想有个拉伸按钮去缩放...

本文实例为大家分享了小程序实现图片移动缩放效果的具体代码,供大家参考,具体内容如下

git地址 , 如果对您有帮助给个start呗

尝试了movable-view标签是很方便, 但是我想有个拉伸按钮去缩放图片, 于是尝试自己写了.
思想利用catchtouchmove属性计算偏移量, 实时更新坐标

小程序实现图片移动缩放效果

以下是完整代码

js

/**
 * all right by nieyinlong
 */

page({

 /**
 * 页面的初始数据
 */
 data: {
 bgboxheight: 400, // 背景的高度
 bgboxwidth: 320, // 背景的宽度
 
 moveimgleft: 40,
 moveimgtop: 80,
 moveimgh: 100,
 moveimgw: 100,

 scaleiconfixwidth: 30,
 scaleleft: 0,    // 拉伸按钮默认x坐标 (拉伸按钮默认宽高30)
 scaletop: 0,    // 拉伸按钮默认y坐标
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onload: function (options) {
 const halfwidth = this.data.scaleiconfixwidth / 2
 this.setdata({
  scaleleft: this.data.moveimgleft + this.data.moveimgw - halfwidth,
  scaletop: this.data.moveimgtop + this.data.moveimgh - halfwidth
 })
 },

 // 图片移动
 moveimgtouchmove: function(e) {
 console.log(e)
 let pagex = e.changedtouches[0].pagex
 let pagey = e.changedtouches[0].pagey
 
 
 // (this.data.moveimgw / 2)是因为触摸放到中间位置
 let toleft = pagex - this.data.moveimgw / 2; 
 let totop = pagey - this.data.moveimgh / 2;

 const halfwidth = this.data.scaleiconfixwidth / 2

 // 限制x左边不能出边框
 if (pagex - (this.data.moveimgw / 2) <= 0) {
  return;
 }
 
 // 限制右边不能出超过边框
 if ((pagex + (this.data.moveimgw / 2)) >= (this.data.bgboxwidth)) {
  return;
 }

 // 限制top
 if (pagey - (this.data.moveimgh / 2) <= 1) {
  return;
 }

 // 限制bottom
 if ((pagey + (this.data.moveimgh / 2)) >= this.data.bgboxheight) {
  return;
 }


 this.setdata({
  moveimgleft: toleft,
  moveimgtop: totop,
  scaleleft: toleft + this.data.moveimgw - halfwidth,
  scaletop: totop + this.data.moveimgh - halfwidth
 })
 },
 
 // 拉伸按钮移动
 scaletouchmove: function (e) {
 console.log(e)
 let pagex = e.changedtouches[0].pagex
 let pagey = e.changedtouches[0].pagey
 const halfwidth = this.data.scaleiconfixwidth / 2
 let toleft = pagex - halfwidth // 减去halfwidth是拉伸按钮宽度的一半
 let totop = pagey - halfwidth

 
 let changedw = pagex - this.data.moveimgleft
 let changedh = pagey - this.data.moveimgtop

 // 限制最moveimg小尺寸
 if (toleft <= (this.data.moveimgleft + halfwidth)) {
  return;
 }
 if (totop <= (this.data.moveimgtop + halfwidth)) {
  return;
 }

 // 限制moveimg最大尺寸
 if(pagex - this.data.moveimgleft > 250) {
  // 宽度达到最大值
  return;
 }
 if (pagey - this.data.moveimgtop > 250) {
  // 高度达到最大值
  return;
 }

 // 限制拉伸按钮的right
 if(this.data.scaleleft + this.data.scaleiconfixwidth >= this.data.bgboxwidth) {
  return;
 }
 // 限制拉伸按钮的bottom
 if (this.data.scaletop + this.data.scaleiconfixwidth >= this.data.bgboxheight) {
  return;
 }

 this.setdata({
  scaleleft: toleft,
  scaletop: totop,
  moveimgw: pagex - this.data.moveimgleft,
  moveimgh: pagey - this.data.moveimgtop,
 })
 },

})

wxml

<view 
 class='bgbox' 
 style="height:{{bgboxheight}}px; width:{{bgboxwidth}}px"
>
 <image 
 class='movedimg'
 src='../../image/moveimg.png'
 catchtouchmove='moveimgtouchmove'
 style="width:{{moveimgw}}px;height:{{moveimgh}}px; left:{{moveimgleft}}px;top:{{moveimgtop}}px"
 />
 
 <image 
 src='../../image/spreadicon.png'
 class='scaleicon'
 catchtouchmove='scaletouchmove'
 style="width:{{scaleiconfixwidth}}px;height:{{scaleiconfixwidth}}px; left:{{scaleleft}}px; top:{{scaletop}}px"
 />
</view>

wxss

.bgbox {
 border: 2px solid green;
 height: 400px;
 width: 99vw;
}

.movedimg {
 position: absolute;
 border: 3px dotted rgb(255, 166, 0);
}

.scaleicon {
 position: absolute;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。