快捷導(dǎo)航

uniapp中實(shí)現(xiàn)canvas超出屏幕滾動(dòng)查看功能

更新時(shí)間：2024年03月28日 12:09:53 作者：一只花小妖

親愛(ài)的小伙伴,當(dāng)你需要在uniapp中使用canvas繪制一個(gè)超長(zhǎng)圖,就類似于橫向的流程圖時(shí),這個(gè)canvas超出屏幕部分拖動(dòng)屏幕查看會(huì)變得十分棘手,怎么解決這個(gè)問(wèn)題呢,下面小編給大家介紹uniapp中實(shí)現(xiàn)canvas超出屏幕滾動(dòng)查看功能,感興趣的朋友一起看看吧

親愛(ài)的小伙伴，當(dāng)你需要在uniapp中使用canvas繪制一個(gè)超長(zhǎng)圖，就類似于橫向的流程圖時(shí)，這個(gè)canvas超出屏幕部分拖動(dòng)屏幕查看會(huì)變得十分棘手。我查閱了大量資料，甚至是問(wèn)了無(wú)數(shù)遍AI，得到的結(jié)果只有很敷衍的監(jiān)聽touch,然后計(jì)算偏移量，然后重繪?？墒?，你想想，如果一次繪圖里邊有成百上千個(gè)元素，還有很大的圖片，你重繪？那不得卡死。終于，在一次詢問(wèn)AI時(shí)給了我一絲曙光，并且實(shí)踐告訴我，這個(gè)方法絕對(duì)管用！

1.使用scroll-view嵌套canvas，官網(wǎng)是說(shuō)不許嵌套的，但是我們可以另辟蹊徑，滾動(dòng)的關(guān)鍵就再這個(gè)onTouchMove方法中

<scroll-view ref="scrollView" scroll-x scroll-y style="height: 100vh;" @touchmove="onTouchMove">
			<canvas canvas-id="myCanvas" id="myCanvas" @tap="handleCanvasTap" ref="myCanvas"
				style="width: 5000rpx; height: 200vh"></canvas>
		</scroll-view>

2.定義參數(shù)

data(){
    retrun{
        	startX: 0,
				startY: 0,
				offsetX: 0,
				offsetY: 0,
				context: null,
				endX: 0,
				endY: 0,
				isMoving: false,
    }
}

3.關(guān)鍵方法

onTouchMove(e){
    				if (this.isMoving) {
					const deltaX = e.touches[0].clientX - this.startX;
					const deltaY = e.touches[0].clientY - this.startY;
					const query = uni.createSelectorQuery().in(this);
					query.select('#myCanvas').boundingClientRect().exec((res) => {
						const canvas = res[0].node;
						canvas.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
					});
					this.endX = e.touches[0].clientX;
					this.endY = e.touches[0].clientY;
				}
}

4.你的canvas屬性要跟的我一致，包你成功！

到此這篇關(guān)于uniapp中實(shí)現(xiàn)canvas超出屏幕滾動(dòng)查看的文章就介紹到這了,更多相關(guān)uniapp canvas滾動(dòng)查看內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: