HarmonyOS Next开发----k线图滑动惯性

K线图的惯性滑动,由于官方提供的Scroller没有设置初始位置的方法,不知道后面会不会支持。由于项目急着上线,所以只有采用另一种方案,滑动结束后模拟计算惯性滑动。

思路:

手指滑动结束后,k线惯性滑动轨迹,类似于匀减速运动。所以可以用个定时器,每个100ms让k线继续平移一段距离,只需要计算出每个时刻的速度即可。对于手指离开屏幕时的速度,可以用平均速度来代替。

class SlideInertia {public callback?: (x: number | null) => void;private startX: number = 0;private lastMoveX: number = 0;private velocity: number = 0;private startTime: number = 0;private timerId: number = -1;constructor(callback?: (x: number | null) => void) {this.callback = callback}public handleTouchStart = (event: GestureEvent) => {this.startX = event.offsetX;this.startTime = new Date().getTime();};public handleTouchMove = (event: GestureEvent) => {this.lastMoveX = event.offsetX;};public handleTouchEnd = () => {const curTime = new Date().getTime();const diffTime = (curTime - this.startTime) / 10;if (diffTime <= 0) {return;}this.velocity = (this.startX - this.lastMoveX) / diffTime;// 释放触摸,开始惯性滑动this.startFling();this.startTime = 0;};private startFling() {const step = () => {this.velocity *= 0.9; // 惯性减弱if (Math.abs(this.velocity) > 1) {if (this.callback) {this.callback(this.velocity);}this.timerId = setTimeout(step, 100);} else {if (this.callback) {this.callback(null);}}};this.timerId = setTimeout(step);}public clearTimer() {if (this.timerId > 0) {clearTimeout(this.timerId);}}
}
然后在组件的TouchDown、TouchMove和TouchUP事件处调用,然后回调里面处理滑动即可。
 .onActionStart((event) => {if (!this.mIsTouchRegionStats && !this.mIsLongPressed && event.fingerList.length === 1) {this.requestParentNotHandleGesture(true);this.mGestureHelper.startScroll();this.slideInertia.handleTouchStart(event);}}).onActionEnd(() => {this.mGestureHelper.stopScroll();this.onDraw();}).onActionUpdate((event?: GestureEvent) => {if (event && event.fingerList.length === 1) {if (this.mIsLongPressed) {let reallyOffsetX: number = event.offsetX - this.mLastOffsetX;let reallyOffsetY: number = event.offsetY - this.mLastOffsetY;this.mLastOffsetX = event.offsetX;this.mLastOffsetY = event.offsetY;this.mTouchPoint.offset(reallyOffsetX, reallyOffsetY);let mainRenderTitleHeight = this.titleHeightArr[0];const padding = UPMarketUIIndexBaseRender.padding;this.mTouchPoint.y = Math.max(mainRenderTitleHeight + padding, this.mTouchPoint.y);this.mTouchPoint.y = Math.min(this.totalHeight - padding * 2, this.mTouchPoint.y);this.mGestureHelper.updateCrossPoint(this.touchX2CrossX(this.mTouchPoint.x), this.mTouchPoint.y);this.callbackLongClickData();this.onDraw();} else if (!this.mGestureHelper.isShowCross()) {//平移if (this.mGestureHelper.scroll(event.offsetX, this.totalWidth)) {this.callbackRegionStatsChanged();this.onDraw();}this.slideInertia.handleTouchMove(event);}}}})
   .onTouch((event: TouchEvent) => {switch (event.type) {case TouchType.Down:this.slideInertia.clearTimer();this.mIsTouchRegionStats = this.mGestureHelper.isTouchRegionStatsControlPoint(new UPPoint(event.touches[0].x, event.touches[0].y));if (this.mIsTouchRegionStats) {this.requestParentNotHandleGesture(true);}this.mLastTouchDownPoint.set(event.touches[0].x, event.touches[0].y);breakcase TouchType.Move:let distanceX: number = Math.abs(this.mLastTouchDownPoint.x - event.touches[0].x);let distanceY: number = Math.abs(this.mLastTouchDownPoint.y - event.touches[0].y);if ((distanceX > distanceY && (this.attrs?.supportTranslationAndZoom || this.mIsLongPressed))|| this.mIsTouchRegionStats) { // 如果触摸点在区间统计控制区域,则支持垂直和水平方向滑动,无需判断distanceXthis.mCanHorizontalScroll = true;}if (this.mIsTouchRegionStats) {let regionStatsIndexChanged = this.mGestureHelper.updateRegionStatsControlPoint(new UPPoint(event.touches[0].x, event.touches[0].y), event.touches[0].x - this.mLastTouchDownPoint.x);if (regionStatsIndexChanged) {this.callbackRegionStatsChanged();this.onDraw();}}breakcase TouchType.Up:case TouchType.Cancel:if (!this.mGestureHelper.isShowRegionStats() && !this.mIsLongPressed) {this.slideInertia.handleTouchEnd();}
由于k线图有些操作时不需要惯性滑动的(比如长按、区间统计打开时等),所以将handleTouchStart和handleTouchMove放在了平移手势回调里面。
  private slideInertia: SlideInertia = new SlideInertia((offsetX: number | null) => {if (offsetX == null) {return;}if (this.mGestureHelper.scroll(0, 0, Math.floor(offsetX))) {this.onDraw();} else {this.slideInertia.clearTimer();}});

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/338434.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

冒泡排序与快速排序

博主主页: 码农派大星. 数据结构专栏:Java数据结构 数据库专栏:MySQL数据库 关注博主带你了解更多数据结构知识 1.冒泡排序 冒泡排序 private static void swap(int[] arrary,int i,int j){int tmp arrary[i];arrary[i] arrary[j];arrary[j] tmp;public static void bubbl…

STM32作业实现(七)OLED显示数据

目录 STM32作业设计 STM32作业实现(一)串口通信 STM32作业实现(二)串口控制led STM32作业实现(三)串口控制有源蜂鸣器 STM32作业实现(四)光敏传感器 STM32作业实现(五)温湿度传感器dht11 STM32作业实现(六)闪存保存数据 STM32作业实现(七)OLED显示数据 STM32作业实现(八)触摸按…

系统架构设计师【第2章】: 计算机系统基础知识 (核心总结)

文章目录 2.1 计算机系统概述2.2 计算机硬件2.2.1 计算机硬件组成2.2.2 处理器2.2.3 存储器2.2.4 总线2.2.5 接口2.2.6 外部设备 2.3 计算机软件2.3.1 计算机软件概述2.3.2 操作系统2.3.3 数据库2.3.4 文件系统2.3.5 网络协议2.3.6 中间件2.3.7 软件构件2.3.8 …

用贪心算法计算十进制数转二进制数(小数部分)

在上一篇博文用贪心算法计算十进制数转二进制数&#xff08;整数部分&#xff09;-CSDN博客中&#xff0c;小编介绍了用贪心算法进行十进制整数转化为二进制数的操作步骤&#xff0c;那么有朋友问我&#xff0c;那十进制小数转二进制&#xff0c;可以用贪心算法来计算吗&#x…

错误模块路径: ...\v4.0.30319\clr.dll,v4.0.30319 .NET 运行时中出现内部错误,进程终止,退出代码为 80131506。

全网唯一解决此BUG的文章&#xff01;&#xff01;&#xff01; 你是否碰到了以下几种问题&#xff1f;先说原因解决思路具体操作1、首先将你C:\Windows\Microsoft.NET\文件夹的所有者修改为你当前用户&#xff0c;我的是administrator。2、修改当前用户权限。3、重启电脑4、删…

童心绘梦,味在蒙自源 —— 蒙自源六一儿童节特别活动

当六月的阳光洒满大地&#xff0c;阵阵知了的叫声唤醒了沉睡的花朵&#xff0c;也唤醒了所有人心中的那份纯真与梦想。每个孩子都是天生的梦想家。他们用纯真的双眼观察世界&#xff0c;用无畏的心灵探索未知。今年的六一儿童节&#xff0c;不仅是孩子们的节日&#xff0c;也是…

数学建模 —— 插值与拟合(1)

一、matlab画图 1.1 plot&#xff08;二维图形&#xff09; plot(x) —— 缺省自变量绘图格式 plot(x,y) —— 基本格式&#xff0c;以y(x)的函数关系作出直角坐标图&#xff0c;如果y为nm的矩阵&#xff0c;则以x为自变量&#xff0c;作出m条曲线 plot(x1,y1,x2,y2,…,xn,…

【MySQL数据库】索引与事务

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【MySQL】探秘&#xff1a;数据库世界的瑞士军刀 目录 &#x1f5f3;️一.索引 &#x1f4ee;1.工作原理 &#x1f4ec;2.类型 &#x1f4ed;3.作用 &#x1f4ea;4.优缺点 &#x1f4eb;5.使用…

Git远程操作

下面演示在gitee上创建远程仓库 创建远程仓库 上面的.gitignore是为了在上传时过滤掉不重要的文件&#xff0c;分支模型选单分支模型就够用了&#xff0c;或者选生产/开发模型。 当然&#xff0c;如果创建仓库的时候没有添加.gitignore文件&#xff0c;可以在本地仓库创建.gi…

Nvidia Jetson/Orin +FPGA+AI大算力边缘计算盒子:美团小袋自动配送车

大型电商公司美团已选用NVIDIA Jetson AGX Xavier 平台&#xff0c;作为无人配送机器人核心AI算力。 美团点评是全球大型的按需食品配送公司&#xff0c;结合了Uber Eats、Yelp和Groupon的商业模式&#xff0c;与超过40万家本地企业开展合作。他们推出了小袋自动配送车&#…

【OpenHarmony】TypeScript 语法 ③ ( 条件语句 | if else 语句 | switch case 语句 )

文章目录 一、条件语句1、if else 语句2、switch case 语句 参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍 一、条件语句 1、if else 语句 TypeScript 中的 if 语句 / if else 语句 用法 , 与 JavaScript 语言中的 if 语句 / if else 语句 语法 基本相同 ; if else 语…

QT 信号和槽教程,窗体和控件对象之间的沟通一般都使用信号和槽

Qt的信号和槽&#xff08;Signals and Slots&#xff09;机制是一种强大的对象间通信方式&#xff0c;它允许对象在完全解耦的情况下相互通信。以下是关于Qt信号和槽的简明教程&#xff1a; 基本概念 信号&#xff08;Signal&#xff09;&#xff1a;信号是由Qt对象发出的通知…

Docker 快速更改容器的重启策略(Restart Policies)以及重启策略详解

目录 1. 使用 docker update 命令2. 在启动容器时指定重启策略3. 在 Docker Compose 文件中指定重启策略4. 总结 官方文档&#xff1a;Start containers automatically 1. 使用 docker update 命令 Docker 提供了 docker update 命令&#xff0c;可以在容器运行时更改其重启策…

Elasticsearch:基于多个 kNN 字段对文档进行评分

作者&#xff1a;来自 Elastic Madhusudhan Konda 通过具有多个 kNN 字段的最接近的文档对文档进行评分 Elasticsearch 不仅仅是一个词法&#xff08;文本&#xff09;搜索引擎。 Elasticsearch 是多功能搜索引擎&#xff0c;除了传统的文本匹配之外&#xff0c;还支持 k 最近…

华为设备配置静态路由和默认路由

华为设备配置静态路由和默认路由 理论部分知识&#xff1a; 路由分为两个大类&#xff1a;静态路由-----动态路由 静态路由&#xff1a;手工指定&#xff0c;适用于小规模的网络应用场景&#xff0c;如果网络规模变大&#xff0c;这样的方式非常不适合而且容易出错。 语法&…

【JavaEE进阶】——Mybatis操作数据库(使用注解和XML方式)

目录 &#x1f6a9;三层架构 &#x1f388;JDBC操作回顾 &#x1f6a9;什么是MyBatis &#x1f6a9;MyBatis⼊⻔ &#x1f388;准备工作 &#x1f4dd;创建⼯程 &#x1f4dd;数据准备 &#x1f388;配置数据库连接字符串 &#x1f388;写持久层代码 &#x1f388;单…

STM32作业设计

目录 STM32作业设计 STM32作业实现(一)串口通信 STM32作业实现(二)串口控制led STM32作业实现(三)串口控制有源蜂鸣器 STM32作业实现(四)光敏传感器 STM32作业实现(五)温湿度传感器dht11 STM32作业实现(六)闪存保存数据 STM32作业实现(七)OLED显示数据 STM32作业实现(八)触摸按…

PyQt5创建与MySQL数据库集成的应用程序

最近&#xff0c;对之前的mysql管理系统进行了更新升级&#xff0c;制作了一版关于车牌的管理系统&#xff01; &#xff08;1&#xff09;实现了对车牌和用户基本信息的增删改查的功能 &#xff01; &#xff08;2&#xff09;加入了对数据库的刷新和状态显示功能 &#xff…

没有知网资源如何快速下载知网论文

今天有位同学求助一篇知网论文&#xff0c;“球磨-点击化学反应&#xff1a;无溶剂绿色反应方式”&#xff0c;其实下载知网论文是一件非常简单的事情&#xff0c;下面小编就把如何在家轻松查找下载知网论文的方法给大家演示一遍。 一、首先你需要获取知网使用权限&#xff0c…

css特殊效果和页面布局

特殊效果 圆角边框&#xff1a;div{border-radius: 20px 10px 50px 30px;} 四个属性值按顺时针排列&#xff0c;左上的1/4圆半径为20px&#xff0c;右上10&#xff0c;右下50&#xff0c;左下30。 div{border-radius: 20px;} 四角都为20px。 div{border-radius: 20px 10…