uniapp中实现canvas超出屏幕滚动查看功能,
3672Js.Com2024-04-11 02:23 来源:未知 阅读:19885 关注度3
uniapp中实现canvas超出屏幕滚动查看功能,
亲爱的小伙伴,当你需要在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属性要跟的我一致,包你成功!
到此这篇关于uniapp中实现canvas超出屏幕滚动查看的文章就介绍到这了,更多相关uniapp canvas滚动查看内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程!
您可能感兴趣的文章:- uniapp中scroll-view实现自动滚动到最底部的方法
- uniapp禁止遮罩层下页面滚动的解决方法
- uniapp微信小程序与H5的弹窗滚动穿透解决方法
- uniapp几行代码解决滚动穿透问题(项目实战)
- uniapp实现横向滚动选择日期
- uniapp中canvas绘制图片内容空白报错的原因及解决
- Vue和uniapp中该如何使用canvas详解
- uniapp封装canvas组件无脑绘制保存小程序分享海报
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭