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

相关文章

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

鸿蒙中@State的原理使用详解(HarmonyOS 5)

《鸿蒙中@State的原理使用详解(HarmonyOS5)》@State是HarmonyOSArkTS框架中用于管理组件状态的核心装饰器,其核心作用是实现数据驱动UI的响应式编程模式,本文给大家介绍... 目录一、@State在鸿蒙中是做什么的?二、@Spythontate的基本原理1. 依赖关系的收集2.

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

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

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