亲爱的小伙伴，当你需要在uniapp中使用canvas绘制一个超长图，就类似于横向的流程图时，这个canvas超出屏幕部分拖动屏幕查看会变得十分棘手。我查阅了大量资料，甚至是问了无数遍AI，得到的结果只有很敷衍的监听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属性要跟的我一致，包你成功！