這篇文章主要為大家展示了小程序如何實(shí)現(xiàn)圖片移動(dòng)縮放，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來看看吧。
主要從事網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、成都響應(yīng)式網(wǎng)站建設(shè)、程序開發(fā)、微網(wǎng)站、重慶小程序開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等多方位專業(yè)化運(yùn)作于一體，具備承接不同規(guī)模與類型的建設(shè)項(xiàng)目的能力。
嘗試了movable-view標(biāo)簽是很方便, 但是我想有個(gè)拉伸按鈕去縮放圖片, 于是嘗試自己寫了.
思想利用catchtouchmove屬性計(jì)算偏移量, 實(shí)時(shí)更新坐標(biāo)
以下是完整代碼
js
重慶分公司
重慶分公司
/**
* All right by NieYinlong
*/
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
bgBoxHeight: 400, // 背景的高度
bgBoxWidth: 320, // 背景的寬度
moveImgLeft: 40,
moveImgTop: 80,
moveImgH: 100,
moveImgW: 100,
scaleIconFixWidth: 30,
scaleLeft: 0, // 拉伸按鈕默認(rèn)x坐標(biāo) (拉伸按鈕默認(rèn)寬高30)
scaleTop: 0, // 拉伸按鈕默認(rèn)y坐標(biāo)
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
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
})
},
// 圖片移動(dòng)
moveImgTouchmove: function(e) {
console.log(e)
let pageX = e.changedTouches[0].pageX
let pageY = e.changedTouches[0].pageY
// (this.data.moveImgW / 2)是因?yàn)橛|摸放到中間位置
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
})
},
// 拉伸按鈕移動(dòng)
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) {
// 寬度達(dá)到最大值
return;
}
if (pageY - this.data.moveImgTop > 250) {
// 高度達(dá)到最大值
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
wxss
.bgBox {
border: 2px solid green;
height: 400px;
width: 99vw;
}
.movedImg {
position: absolute;
border: 3px dotted rgb(255, 166, 0);
}
.scaleIcon {
position: absolute;
}以上就是關(guān)于小程序如何實(shí)現(xiàn)圖片移動(dòng)縮放的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。
