HarmonyOS鸿蒙Next中K线图实现惯性滑动

HarmonyOS鸿蒙Next中K线图实现惯性滑动 在HarmonyOS开发中，实现K线图的惯性滑动是一个常见的需求。这里不采用 Scroller组件进行各种嵌套来实现惯性滑动，而是通过自定义手势事件来模拟惯性滑动。

  • 说明 / 这里不采用 CanvasRenderingContext2D API 由于 CanvasRenderingContext2D API 是针对轻量视图绘制的API, K线图、分时图对绘制性能要求过高，所以采用 RenderNode 进行绘制

CanvasRenderingContext2D API 文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5

RenderNode API 文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-rendernode-V5

private DISTANCE_X: number = 0.52
private DISTANCE_X: number = 0.52

disposePanGestureEvent(eventType: GestureEventType, event: GestureEvent) {
    switch (eventType) {
      // 开始滑动
      case GestureEventType.GESTURE_EVENT_START:
        this.startX = event.offsetX
        this startY = event.offsetY

        this.startTime = new Date().getTime()
        break
      // 持续滑动
      case GestureEventType.GESTURE_EVENT_MOVE:
        this.moveX = event.offsetX
        this.moveY = event.offsetY

        this.onSlipEventInterface?.onNext(this.moveX, this.moveY)
        break
      // 结束滑动
      case GestureEventType.GESTURE_EVENT_END:
        this.finishX = event.offsetX
        this.finishY = event.offsetY

        const diffX = this.startX - this.finishX
        const diffTime = (new Date().getTime() - this.startTime)
        // 计算移动的速度
        if (diffTime > 0) {
          this.velocity = diffX / (diffTime / 1000) * this.DISTANCE_X
        } else {
          this.velocity = 0
        }
        this.startInertiaSlip()
        break
    }
}

private startInertiaSlip() {
    const step = () => {
      this.velocity *= this.VELOCITY_X
      if (Math.abs(this.velocity) > 1) {
        this.onSlipEventInterface?.onNext(this.velocity * -1, 0)
        // 16ms 大约为 60 帧
        setTimeout(step, 16)
      } else {
        this.onSlipEventInterface?.onNext(null, null)
      }
    }
    step()
}

onPanGestureEvent(eventType: GestureEventType, event: GestureEvent) {
    const slipBack: OnSlipEventInterface = {
      onNext: (offsetX: number | null, offsetY: number | null): void => {
        if (offsetX) {
          this.onScroll(offsetX)
        }
      }
    }
    this.slipEventManager.registerSlipEventInterface(slipBack)
      .disposePanGestureEvent(eventType, event)
}

在 onScroll 函数中处理滑动更新

const deltaX = (offsetX * this.slideCoefficient)

更多关于HarmonyOS鸿蒙Next中K线图实现惯性滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

很好，可以借鉴

更多关于HarmonyOS鸿蒙Next中K线图实现惯性滑动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现K线图的惯性滑动，可以通过使用ArkUI框架中的Scroll组件和PanGesture手势事件来实现。Scroll组件用于处理滚动行为，而PanGesture可以捕获用户的滑动手势。

首先，创建一个自定义的K线图组件，使用Canvas或CustomComponent来绘制K线图。然后，将K线图组件放入Scroll组件中，并设置Scroll的滚动方向和边界。

接下来，通过PanGesture监听用户的滑动手势。在onActionStart、onActionUpdate和onActionEnd回调中，分别处理手势的开始、更新和结束事件。在onActionEnd中，根据手势的速度和方向，计算出惯性滑动的距离和持续时间，并通过Scroll组件的scrollTo方法实现惯性滑动效果。

具体实现步骤如下：

  1. 创建K线图组件，使用Canvas或CustomComponent绘制K线图。
  2. 将K线图组件放入Scroll组件中，设置滚动方向和边界。
  3. 使用PanGesture监听滑动手势，在onActionEnd中计算惯性滑动的距离和持续时间。
  4. 通过Scroll组件的scrollTo方法实现惯性滑动。

示例代码如下：

import { Scroll, PanGesture, Canvas } from '@ohos.arkui';

@Entry
@Component
struct KLineChart {
  private scrollController: Scroll.Controller = new Scroll.Controller();
  private startX: number = 0;
  private velocityX: number = 0;

  build() {
    Scroll({ controller: this.scrollController }) {
      Canvas()
        .onPanGesture({
          onActionStart: (event: PanGesture.Event) => {
            this.startX = event.offsetX;
          },
          onActionUpdate: (event: PanGesture.Event) => {
            this.velocityX = event.velocityX;
          },
          onActionEnd: (event: PanGesture.Event) => {
            const distance = this.velocityX * 100; // 根据速度计算滑动距离
            const duration = Math.abs(distance) / 1000; // 根据距离计算持续时间
            this.scrollController.scrollTo({ x: distance, duration: duration });
          }
        })
    }
  }
}

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现K线图的惯性滑动效果。

在HarmonyOS鸿蒙Next中实现K线图的惯性滑动，可以通过以下步骤：

  1. 手势监听：使用GestureDetector监听滑动事件，获取滑动的速度和方向。

  2. 惯性计算：根据滑动的速度和方向，计算惯性滑动的距离和持续时间。可以使用物理公式distance = velocity * time - 0.5 * friction * time^2进行计算。

  3. 动画实现：使用Animator或AnimationController实现平滑的滑动动画，将计算出的距离应用到K线图的平移变换中。

  4. 边界处理：在滑动过程中，确保K线图不会滑动超出数据范围，并在到达边界时停止滑动。

通过这些步骤，可以实现K线图的惯性滑动效果，提升用户体验。

回到顶部