快捷導(dǎo)航

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

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

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

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

1.使用scroll-view嵌套canvas，官網(wǎng)是說不許嵌套的，但是我們可以另辟蹊徑，滾動的關(guān)鍵就再這個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中實現(xiàn)canvas超出屏幕滾動查看的文章就介紹到這了,更多相關(guān)uniapp canvas滾動查看內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: