HarmonyOS 怎样设置一个横向和竖向都可以滑动的组件

参考示例如下：

import { hilog } from '@kit.PerformanceAnalysisKit'
import animator, { AnimatorResult } from '@ohos.animator';

@Entry
@Component
struct Spread {
  private settings: RenderingContextSettings = new RenderingContextSettings(false)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private backAnimator: AnimatorResult | undefined
  cw: number = 0
  ch: number = 0
  px: number = 0
  py: number = 0
  last_offset_x: number = 0
  last_offset_y: number = 0
  offset_x: number = 0
  offset_y: number = 0
  private _maxRow = 1048576 //1000
  private _maxCol = 16384
  rw: number = 65
  rh: number = 25
  zoom: number = 1

  fill(zoom?: number) {
    let stroke_size = px2vp(1);
    this.context.clearRect(0, 0, this.cw * 2, this.ch * 2)
    if (zoom) {
      this.context.scale(zoom, zoom)
    }
    this.context.lineWidth = stroke_size
    this.context.strokeStyle = '#dfdfdf'
    let fontHeight = this.context.measureText("测").height //fs //
    let fs = 12
    let yh = (this.rh + fontHeight) / 2 + fs
    let font = fp2px(fs) + 'px sans-serif'
    let cc = 0
    for (let r = 0; r < 100; r++) {
      let y = r * this.rh + this.offset_y
      if (y + this.rh < 0 || y - this.rh > this.ch) {
        continue
      }
      for (let c = 0; c < 20; c++) {
        let x = c * this.rw + this.offset_x
        if (x - this.rw > this.cw || x + this.rw < 0) {
          continue
        }
        this.context.fillStyle = "#f00"
        this.context.fillRect(x, y, this.rw, this.rh)
        this.context.fillStyle = "#000"
        this.context.font = font;
        let font_y = y - yh;
        this.context.fillText("测试", x, font_y)
        cc++
      }
    }
  }

  build() {
    Column() {
      Canvas(this.context)
        .margin({ top: 14 })
        .width('100%')
        .height('100%')
        .backgroundColor('#fff')
        .onAreaChange((oldValue: Area, newValue: Area) => {
          this.cw = new Number(newValue.width).valueOf()
          this.ch = new Number(newValue.height).valueOf()
          this.fill()
        })
        .gesture(
          GestureGroup(GestureMode.Parallel,
            PinchGesture({ fingers: 2 })
              .onActionStart((event: GestureEvent | undefined) => {
                hilog.debug(0, "test", "Pinch start ")
              })// 当捏合手势触发时，可以通过回调函数获取缩放比例，从而修改组件的缩放比例
              .onActionUpdate((event: GestureEvent | undefined) => {
                if (event) {
                  if (event.scale > 1) {
                    this.zoom = 1.05;
                  }
                  if (event.scale < 1) {
                    this.zoom = 0.95
                  }
                  this.fill(this.zoom)
                }
              })
          )
        )
        .onTouch((event?: TouchEvent) => {
          if (event) {
            if (event.type === TouchType.Down) {
              this.px = event.touches[0].displayX
              this.py = event.touches[0].displayY
            }
            if (event.type === TouchType.Up) {
              this.last_offset_x = this.offset_x
              this.last_offset_y = this.offset_y
            }
            if (event.type === TouchType.Move) {
              //上一次的偏移x+这次的偏移
              let of_x = this.last_offset_x + (event.touches[0].displayX - this.px)
              if (of_x > 0) {
                this.offset_x = 0
              } else {
                this.offset_x = of_x
              }
              let of_y = this.last_offset_y + (event.touches[0].displayY - this.py)
              if (of_y < 0) {
                this.offset_y = of_y
              } else {
                this.offset_y = 0
              }
              this.fill()
            }
          }
        })
    }
  }
}