HarmonyOS 使用画布 (Canvas)绘制自定义时间轴，放缩重绘闪烁跳动，导致放缩时间轴功能难以使用

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {  
            Canvas(this.context)  
              .backgroundColor($r('app.color.uni_color_f7f7f7'))  
              .onReady(() => {  
                this.drawTimeline();  
              })  
              .width(LayoutConstant.MATCH_PARENT)  
              .height(this.timeLineHeight * this.scaleValue)// 在组件上绑定缩放比例，可以通过修改缩放比例来实现组件的缩小或者放大  
              .translate({ x: 0, y: this.offsetY, z: 0 })// 以组件左上角为坐标原点进行移动  
              .priorityGesture(  
                GestureGroup(GestureMode.Exclusive,  
                  PanGesture(this.panOption)  
                    .onActionStart((event: GestureEvent) => {  
                      console.info('Pan start')  
                      this.onScrolling?.(true)  
                    })  
                    .onActionUpdate((event: GestureEvent) => {  
                      this.isScrollPanGestureActioning = true;  
                      if (event) {  
                        let tempOffsetY = this.positionY + event.offsetY;  
                        let oneSecondHeight: number =  
                          (this.timeLineHeight * this.scaleValue - this.blankHeight) / (24 * 3600); //每秒的高度  
                        let maxOffsetY = oneSecondHeight * 12 * 3600;  
                        let minOffsetY = -(oneSecondHeight * 12 * 3600);  
                        if (tempOffsetY > maxOffsetY) {  
                          this.offsetX = this.positionX + event.offsetX  
                          this.offsetY = maxOffsetY  
                        } else if (tempOffsetY < minOffsetY) {  
                          this.offsetX = this.positionX + event.offsetX  
                          this.offsetY = minOffsetY  
                        } else {  
                          this.offsetX = this.positionX + event.offsetX  
                          this.offsetY = tempOffsetY  
                        }  
                        this.calculateCurrentBaseLineTime();  
                      }  
                    })  
                    .onActionEnd(() => {  
                      this.isScrollPanGestureActioning = false;  
                      this.positionX = this.offsetX  
                      this.positionY = this.offsetY  
                      console.info('Pan end')  
                      if (this.onSelectTimeSecond != null) {  
                        this.onSelectTimeSecond(this.currentSecond);  
                      }  
                      // 延迟 300 ms回调  
                      setTimeout(() => {  
                        this.onScrolling?.(false)  
                      }, 300)  
                    }),  
                  // 在组件上绑定三指触发的捏合手势  
                  PinchGesture({ fingers: 2, distance: 2 })  
                    .onActionStart((event: GestureEvent | undefined) => {  
                      console.info('Pinch start');  
                      hjqlog.debug2(`Pinch start:${this.scaleValue}`)  
                      this.onScrolling?.(true)  
                    })// 当捏合手势触发时，可以通过回调函数获取缩放比例，从而修改组件的缩放比例  
                    .onActionUpdate((event: GestureEvent | undefined) => {  
                      console.info('Pinch update');  
                      if (event) {  
                        let temp = this.pinchValue * event.scale;  
                        if (temp > MAX_SCALE || temp < MIN_SCALE) {  
                          if (temp < MIN_SCALE) {  
                            this.scaleValue = MIN_SCALE;  
                          } else if (temp > MAX_SCALE) {  
                            this.scaleValue = MAX_SCALE;  
                          }  
                          this.pinchX = event.pinchCenterX;  
                          this.pinchY = event.pinchCenterY;  
                        } else {  
                          this.scaleValue = this.pinchValue * event.scale;  
                          this.pinchX = event.pinchCenterX;  
                          this.pinchY = event.pinchCenterY;  
                        }  
                        hjqlog.debug2(`Pinch update:${this.scaleValue},event.scale(${event.scale})`)  
                      }  
                    })  
                    .onActionEnd(() => {  
                      this.pinchValue = this.scaleValue;  
                      hjqlog.debug2(`Pinch end:${this.scaleValue}`)  
                      console.info('Pinch end');  
                      let currentSelectTime = this.calculateCurrentBaseLineTime();                  
                      // 延迟 300 ms回调  
                      setTimeout(() => {  
                        this.onScrolling?.(false)  
                      }, 300)  
                    })  
                )  
              )  
          }  
          .width(this.timeLineWidth)  
          .height(this.timeLineHeight * this.scaleValue)  
          .zIndex(0)  
// 绘制时间轴和时间段矩形  
  private drawTimeline(): void {  
    this.offCanvas.height = this.timeLineHeight * this.scaleValue;  
    let offContext = this.offCanvas.getContext("2d", this.settings)  
    offContext.clearRect(0, 0, this.offCanvas.width, this.offCanvas.height);  
    this.hoursPerPixel = (this.offCanvas.height - this.blankHeight) / this.totalSeconds; // 24小时对应canvas宽度  
    // 绘制时间轴  
    offContext.beginPath();  
    offContext.moveTo(this.offCanvas.width, this.offCanvas.height);  
    offContext.lineTo(this.offCanvas.width, 0);  
    offContext.lineWidth = 1;  
    offContext.strokeStyle = '#000000';  
    offContext.stroke();  
// 绘制刻度  
    for (let second = 0; second <= this.totalSeconds; second++) {  
      const y = this.offCanvas.height - second * this.hoursPerPixel - this.blankHeight / 2;  
//根据不同放缩比例绘制时间轴刻度（业务代码比较长，没有放上）  
     }  
// 将离屏绘制的内容画到canvas组件上  
    let image = this.offCanvas.transferToImageBitmap();  
    this.context.transferFromImageBitmap(image);  
}