亲爱的小伙伴，当你需要在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组件无脑绘制保存小程序分享海报
