实现时间卡尺功能鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例基于Canvas绘制一个时间卡尺UI组件，滑动卡尺，时间随之发生改变。

实现时间卡尺功能源码链接

效果预览

使用说明

1. 运行demo，进入首页
2. 左右滑动时间卡尺

实现思路

利用Canvas绘制时间卡尺

  Canvas(this.scalePaint)
    .width('100%')
    .height('100%')
    .onReady(() => {
      // 初始化画笔，绘制刻度
      this.scalePaint.lineWidth = this.model.scaleWidth
      this.scalePaint.font = "36px"
      this.scalePaint.fillStyle = "#666"
      this.scalePaint.strokeStyle = "#666"
      this.model.setScaleContext2D(this.scalePaint)
      this.model.drawScales()
    })
    .onAreaChange((_oldArea: Area, newArea: Area) => {
      this.model.onChartSizeChanged(Number(newArea.width), Number(newArea.height))
    })// 绑定组合手势，包括滑动，拖动，捏合手势，并行识别
      // 并行识别组合手势中注册的手势将同时进行识别，直到所有手势识别结束。
      // 并行识别手势组合中的手势进行识别时互不影响
    .gesture(
      GestureGroup(
        GestureMode.Parallel,
        // 第一个滑动手势，必须在拖动手势之前，否则无法识别成功
        // SwipeGesture({ direction: SwipeDirection.Horizontal }).onAction((event: GestureEvent) => {
        //   this.model.onViewSwipe(event)
        // }),
        PanGesture()
          .onActionStart((event: GestureEvent) => {
            this.model.onPanActionStart(event)
          })
          .onActionUpdate((event: GestureEvent) => {
            this.model.onPanActionUpdate(event)
          })
          .onActionEnd((event: GestureEvent) => {
            this.model.onPanActionEnd(event)
          }),
        PinchGesture()
          .onActionStart((event: GestureEvent) => {
            this.model.onPinchActionStart(event)
          })
          .onActionUpdate((event: GestureEvent) => {
            this.model.onPinchActionUpdate(event)
          })
          .onActionEnd((event: GestureEvent) => {
            this.model.onPinchActionEnd(event)
          }),
      )
    )