uniapp中实现canvas超出屏幕滚动查看功能

2024-04-18 0 267

亲爱的小伙伴,当你需要在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滚动查看内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • uniapp中scroll-view实现自动滚动到最底部的方法
  • uniapp禁止遮罩层下页面滚动的解决方法
  • uniapp微信小程序与H5的弹窗滚动穿透解决方法
  • uniapp几行代码解决滚动穿透问题(项目实战)
  • uniapp实现横向滚动选择日期
  • uniapp中canvas绘制图片内容空白报错的原因及解决
  • Vue和uniapp中该如何使用canvas详解
  • uniapp封装canvas组件无脑绘制保存小程序分享海报

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript uniapp中实现canvas超出屏幕滚动查看功能 https://www.u-9.cn/biancheng/javascript/186893.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务