HarmonyOS 鸿蒙Next中使用Canvas绘制折线图

HarmonyOS 鸿蒙Next中使用Canvas绘制折线图

通过PinchGesture进行缩放，缩放渲染过程中会出现闪烁(缩放越大越闪烁)，这个问题应该如何解决 缩放过程中，如果内容宽度大于一屏，当前显示的位置要始终居中，又该怎么去写？

@Component
struct DrawCanvas8 {
  @Consume pathStack: NavPathStack

  // 获取上下文
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context2d: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private context2daxis: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private context2dline: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  private drawTotalScroll: Scroller = new Scroller()

  @Prop private comp_width: number = 0
  @Prop private comp_height: number = 0

  @State private scroll_width: number = 0

  @State private dataArray: number[] = []


  @State scaleValue: number = 1
  @State pinchValue: number = 1
  @State pinchX: number = 0
  @State pinchY: number = 0

  aboutToAppear() {
    this.loadData()
  }

  build() {
    NavDestination() {
      Column() {
        Stack() {
          Canvas(this.context2d)
            .width('100%')
            .height('100%')
            .id('bgcanvas')
            .onReady(() => {
              const width = this.context2d.width
              const height = this.context2d.height
              this.context2d.strokeStyle = '#DCDCDC'
              this.context2d.lineWidth = 1
              this.context2d.strokeRect(0, 0, width, height)

              for (let i = 1; i < 4; i++) {
                this.context2d.lineWidth = 0.5
                this.context2d.strokeStyle = '#F2F2F2'
                this.context2d.moveTo(0, height / 4 * i)
                this.context2d.lineTo(width, height / 4 * i)
              }
              this.context2d.stroke()

              this.comp_width = width
              this.comp_height = height

            })

          Canvas(this.context2daxis)
            .id('left')
            .width('100%')
            .height('100%')
            .onReady(() => {

            })


          Scroll(this.drawTotalScroll) {
            Column({ space: 0 }) {

              Canvas(this.context2dline)
                .id('lines')
                .width('100%')
                .height('100%')
                .onReady(() => {
                })

            }
            .height('100%')
            .width(this.scroll_width)
          }
          .id('totalscroll')
          .width('100%')
          .height('100%')
          .hitTestBehavior(HitTestMode.Transparent)
          .scrollable(ScrollDirection.Horizontal)
          .scrollBar(BarState.Off)
          .onDidScroll(() => {

          })
          .gesture(
            PinchGesture({ fingers: 2 })
              .onActionStart((event: GestureEvent) => {
                console.info('Pinch start')
              })
              .onActionUpdate((event: GestureEvent) => {
                if (event) {
                  this.scaleValue = this.pinchValue * event.scale
                  this.pinchX = event.pinchCenterX
                  this.pinchY = event.pinchCenterY
                  this.draw()
                }
              })
              .onActionEnd((event: GestureEvent) => {
                this.pinchValue = this.scaleValue
                console.info('Pinch end')
              })
          )
        }
        .width('100%')
        .height(300)
        .padding(10)
      }
      .width('100%')
      .height('100%')
    }
  }

  private loadData() {
    setTimeout(() => {
      let tempArray: number[] = []
      for (let index = 0; index < 100; index++) {
        tempArray.push(getRandomNumber(200))
      }
      this.dataArray = tempArray
      this.scroll_width = tempArray.length * 10;
      this.draw()
    }, 500)
  }

  private draw() {
    const min = Math.min(...this.dataArray.map((item: number) => item))
    const max = Math.max(...this.dataArray.map((item: number) => item))

    //Y轴
    this.context2daxis.reset()
    let sepValue = (max - min) / 4
    let yValues: number[] = []
    this.context2daxis.font = '8vp'
    this.context2daxis.fillStyle = '#333333'
    for (let index = 0; index < 5; index++) {
      let y = min + index * sepValue;
      if (index == 0) {
        this.context2daxis.textBaseline = 'bottom'
      } else if (index == 4) {
        this.context2daxis.textBaseline = 'top'
      } else {
        this.context2daxis.textBaseline = 'middle'
      }
      this.context2daxis.fillText(y.toFixed(2), 0, this.comp_height / 4 * (4 -index))
      yValues.push(y)
    }


    const w = 10 * this.scaleValue
    let total_width = w * this.dataArray.length
    if (total_width < this.comp_width) {
      this.scroll_width = this.comp_width
    } else {
      this.scroll_width = total_width
    }


    this.context2dline.reset()
    this.context2dline.beginPath()
    this.context2dline.strokeStyle = '#FF0000'
    this.context2dline.lineWidth = 1
    for (let index = 0; index < this.dataArray.length; index++) {
      const element = this.dataArray[index];
      let x = w * index
      let y = this.comp_height * (element - min) / (max - min)
      if (index == 0) {
        this.context2dline.moveTo(x, y)
      } else {
        this.context2dline.lineTo(x, y)
      }
    }
    this.context2dline.stroke()
  }

}