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

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

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

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

1.使用scroll-view嵌套canvas，官網是說不許嵌套的，但是我們可以另辟蹊徑，滾動的關鍵就再這個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.定義參數

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

3.關鍵方法

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屬性要跟的我一致，包你成功！

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

您可能感興趣的文章: