本文实例为大家分享了小程序实现图片移动缩放效果的具体代码，供大家参考，具体内容如下
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例
CTF 刷题记录（一） 白云新闻搜索（手动与自动化SQL注入）
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论