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()
            }
          }
        })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.