小公司建网站 优帮云,seo排名优化是什么意思,企业邮箱怎么在手机上登录,网页设计个人页面亲爱的小伙伴#xff0c;当你需要在uniapp中使用canvas绘制一个超长图#xff0c;就类似于横向的流程图时#xff0c;这个canvas超出屏幕部分拖动屏幕查看会变得十分棘手。我查阅了大量资料#xff0c;甚至是问了无数遍AI#xff0c;得到的结果只有很敷衍的监听touch,然后…亲爱的小伙伴当你需要在uniapp中使用canvas绘制一个超长图就类似于横向的流程图时这个canvas超出屏幕部分拖动屏幕查看会变得十分棘手。我查阅了大量资料甚至是问了无数遍AI得到的结果只有很敷衍的监听touch,然后计算偏移量然后重绘。可是你想想如果一次绘图里边有成百上千个元素还有很大的图片你重绘那不得卡死。终于在一次询问AI时给了我一丝曙光并且实践告诉我这个方法绝对管用
1.使用scroll-view嵌套canvas官网是说不许嵌套的但是我们可以另辟蹊径滚动的关键就再这个onTouchMove方法中
scroll-view refscrollView scroll-x scroll-y styleheight: 100vh; touchmoveonTouchMovecanvas canvas-idmyCanvas idmyCanvas taphandleCanvasTap refmyCanvasstylewidth: 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属性要跟的我一致包你成功
