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

2024-06-02 13:12

本文主要是介绍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();}});

请添加图片描述

这篇关于HarmonyOS Next开发----k线图滑动惯性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1024060

相关文章

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图

MySQL中Next-Key Lock底层原理实现

《MySQL中Next-KeyLock底层原理实现》Next-KeyLock是MySQLInnoDB存储引擎中的一种锁机制,结合记录锁和间隙锁,用于高效并发控制并避免幻读,本文主要介绍了MySQL中... 目录一、Next-Key Lock 的定义与作用二、底层原理三、源代码解析四、总结Next-Key L

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

使用Python开发一个图像标注与OCR识别工具

《使用Python开发一个图像标注与OCR识别工具》:本文主要介绍一个使用Python开发的工具,允许用户在图像上进行矩形标注,使用OCR对标注区域进行文本识别,并将结果保存为Excel文件,感兴... 目录项目简介1. 图像加载与显示2. 矩形标注3. OCR识别4. 标注的保存与加载5. 裁剪与重置图像

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后