Handwriting Electronic Signature, Waterfall Layout String Height Acquisition, WaterFlow Crash, Web Scrolling Issues

[Daily HarmonyOS Next Knowledge] Handwriting Electronic Signature, Waterfall Layout String Height Acquisition, WaterFlow Crash, Web Scrolling Issues

1. Does HarmonyOS have a demo for handwriting electronic signatures and generating images?

Is there a demo for handwriting electronic signatures and generating images? We hope to have one.

Reference: https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/handwritingtoimage

2. How to get the height of a string in HarmonyOS waterfall layout?

Use the component area event onAreaChange(event: (oldValue: Area, newValue: Area) => void) to get the overall height of the Text component.

Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5#onareachange

onAreaChange(event: (oldValue: Area, newValue: Area) => void): T

• This callback is triggered when the component area changes, responding only to changes in component size and position caused by layout changes.
• It does not respond to rendering property changes (e.g., translate, offset) or position changes determined by rendering (e.g., bindSheet).

3. HarmonyOS WaterFlow crashes when used with WaterFlowSection?

When using WaterFlow + WaterFlowSection as the customList of PicturePullDownRefresh, a crash occurs during initialization.

Solution: In the WaterFlowSource.ets page, change let r = this.mSections.update(index, update) to let r = this.mSections.splice(index, 1, [update]).

4. HarmonyOS Web component nested scrolling: When web content exceeds the screen length, the bottom content cannot scroll联动 (联动)?

• Fixed header and footer: Add an internal height to the outermost Column.

  Column() {
    /// 
  }.width('100%').padding({ bottom: 40 })

• Header and footer scroll with web content: Place the header and footer inside the Scroll component.

  Web({
    src: $rawfile("aa.html"),
    controller: this.controller,
    renderMode: RenderMode.SYNC_RENDER
  })
    .layoutMode(WebLayoutMode.FIT_CONTENT)
    .width("100%")
    .zoomAccess(false)
    .nestedScroll({
      scrollForward: NestedScrollMode.SELF_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST,
    })

5. Cannot get this in HarmonyOS NodeController's onTouchEvent function?

Using QueryImageNodeController (inherited from NodeController), which maintains a nodeArray. When onTouchEvent is called after a click, a crash occurs: Cannot read property nodeArray of undefined. Why is this undefined? Without this, operations after clicking cannot be completed.

Reference demo:

export class QueryImageNodeController extends NodeController {
  private rootNode?: FrameNode
  private nodeArray: Array<ImageNode> = []
  queryImageTouchCallBack?: QueryImageTouchCallBack

  makeNode(uiContext: UIContext): FrameNode {
    this.rootNode = new FrameNode(uiContext)
    const rootRenderNode = this.rootNode.getRenderNode()
    if (rootRenderNode) {
      this.nodeArray.forEach((item) => {
        rootRenderNode.appendChild(item.renderNode)
      })
    }
    return this.rootNode
  }

  onTouchEvent?(event: TouchEvent): void {
    let that = this  // Store `this` in a closure variable
    if (event.type === TouchType.Down) {
      if (event.touches.length > 0) {
        const lastTouch = event.touches[event.touches.length - 1]
        let x = lastTouch.x
        let y = lastTouch.y
        this.nodeArray.forEach((node, index) => { 
          // `this` may be undefined here; use `that` instead
          let box = node.boxItem?.box
          if (!box) {
            return
          }
          if (x > box.x1 && x < box.x2 && y > box.y1 && y < box.y3) {
            that.queryImageTouchCallBack?.onRectTouch(node.boxItem?.questionIndex ?? 0)
          }
        })
      }
    }
  }
}