脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uniapp canvas滚动查看

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

 更新时间：2024年03月28日 12:09:53   作者：一只花小妖  
亲爱的小伙伴,当你需要在uniapp中使用canvas绘制一个超长图,就类似于横向的流程图时,这个canvas超出屏幕部分拖动屏幕查看会变得十分棘手,怎么解决这个问题呢,下面小编给大家介绍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滚动查看内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Prototype框架详解

    Prototype框架详解

    Prototype是一个JavaScript框架，旨在简化动态Web应用程序的开发。原型被称为作为一个单一的文件分发的prototype.js，本文给大家介绍prototype框架，感兴趣的朋友一起学习吧
    2015-11-11
  • javascript DOM 操作基础知识小结

    javascript DOM 操作基础知识小结

    经常用到javascript对dom，喜欢这方便的朋友也很多，要想更好的对dom进行操作，这些基础一定要知道的。
    2010-04-04
  • JavaScript进阶（四）原型与原型链用法实例分析

    JavaScript进阶（四）原型与原型链用法实例分析

    这篇文章主要介绍了JavaScript原型与原型链,结合实例形式分析了JavaScript原型与原型链基本概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-05-05
  • javascript过滤危险脚本方法

    javascript过滤危险脚本方法

    脚本藏身之处不过有四： 1、<script>标签、<link>标签、<style>标签、iframe标签 2、on开头的标签属性 3、javascript(vbscript)伪协议 4、css的epression
    2008-08-08
  • js检测网络是否具体连接功能的代码

    js检测网络是否具体连接功能的代码

    这篇文章主要介绍了js如何实现检测网络是否具体连接功能 ,需要的朋友可以参考下
    2014-05-05
  • JS自定义功能函数实现动态添加网址参数修改网址参数值

    JS自定义功能函数实现动态添加网址参数修改网址参数值

    本文自定义JS功能函数可动态添加网址参数,修改网址参数值，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • 使用cypress编写第一个测试用例

    使用cypress编写第一个测试用例

    这篇文章主要为大家介绍了使用cypress编写第一个测试用例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • TypeScript工具类型Exclude与Omit的用法及解读

    TypeScript工具类型Exclude与Omit的用法及解读

    本文深入讲解了TypeScript中Exclude和Omit工具类型,从概念、语法、示例到实际应用场景进行了详细分析,Exclude用于从联合类型中排除指定类型,Omit则用于从对象类型中剔除指定属性,结合示例帮助开发者掌握这两个工具类型,提升TypeScript开发效率
    2026-04-04
  • Invalid Host header问题该如何解决的几种方式

    Invalid Host header问题该如何解决的几种方式

    Invalid Host header是一个常见的错误信息,通常发生在Web应用程序中,下面这篇文章主要给大家介绍了关于Invalid Host header问题该如何解决的几种方式,需要的朋友可以参考下
    2024-09-09
  • JavaScript实现限时秒杀功能

    JavaScript实现限时秒杀功能

    各种电商活动都喜换选择限时秒杀活动形式，这篇文章主要为大家详细介绍了JavaScript实现限时秒杀功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论