Dear friends, when you need to use canvas to draw an extra-long picture in uniapp, similar to a horizontal flow chart, dragging the screen to view the screen beyond the screen will become very tricky. I have consulted a lot of information and even asked about AI countless times. The result I got was just a very perfunctory monitoring touch, then calculated the offset, and then repainted. But think about it, if there are hundreds of elements and large pictures in the drawing at one time, you repaint it? That must not be stuck. Finally, I gave me a glimmer of hope when I asked about AI, and practice told me that this method absolutely works!
1. Use scroll-view to nest canvas. The official website says that it is not allowed to be nested, but we can find another way. The key to scrolling is to use this onTouchMove method.
<scroll-view ref="scrollView" scroll-x scroll-y style="height: 100vh;" @touchmove="onTouchMove"> <canvas canvas- @tap="handleCanvasTap" ref="myCanvas" style="width: 5000rpx; height: 200vh"></canvas> </scroll-view>
2. Define parameters
data(){
retrun{
startX: 0,
startY: 0,
offsetX: 0,
offsetY: 0,
context: null,
endX: 0,
endY: 0,
isMoving: false,
}
}3. Key Methods
onTouchMove(e){
if () {
const deltaX = [0].clientX - ;
const deltaY = [0].clientY - ;
const query = ().in(this);
('#myCanvas').boundingClientRect().exec((res) => {
const canvas = res[0].node;
= `translate(${deltaX}px, ${deltaY}px)`;
});
= [0].clientX;
= [0].clientY;
}
}4. Your canvas attribute must be consistent with me, and you will be successful!
This is the article about the implementation of canvas in uniapp scrolling beyond the screen. For more related uniapp canvas scrolling content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!