[Bug] The text is not vertically centered. on Apple Device ( iPhone, iPad, Safari, ...)

[thichmautim]

Version

9.8.12

Steps to Reproduce

我发现当在 iOS 设备上使用 KLineCharts 库时，priceMark 的价格标记在垂直方向上没有居中对齐。请看图片。

Current Behavior

出现了如上图所示的偏移现象。

Expected Behavior

调整为两边对称。

Environment

- OS: iOS 18.2.1
- Browser: WebView IOS
- Framework: Flutter

Any additional comments?

No response

[thichmautim]

Temporary solution:

file : /src/extension/figure/text.ts

export function drawText(
  ctx: CanvasRenderingContext2D,
  attrs: TextAttrs | TextAttrs[],
  styles: Partial<TextStyle>,
): void {
  let texts: TextAttrs[] = []
  texts = texts.concat(attrs)
  let {
    color = 'currentColor',
    size = 12,
    family,
    weight,
    paddingLeft = 0,
    paddingTop = 0,
    paddingRight = 0,
  } = styles
  const rects = texts.map((text) => getTextRect(text, styles))
  drawRect(ctx, rects, { ...styles, color: styles.backgroundColor })

  ctx.fillStyle = color
  ctx.textAlign = 'left'
  ctx.textBaseline = 'top'
  ctx.font = createFont(size, weight, family)

  // Fix bug where content is not centered vertically on iOS devices //
  if (isIOS()) {
    paddingTop -= 2
  }

  texts.forEach((text, index) => {
    const rect = rects[index]
    ctx.fillText(
      text.text,
      rect.x + paddingLeft,
      rect.y + paddingTop,
      rect.width - paddingLeft - paddingRight,
    )
  })
}

[thichmautim]

I have fixed this issue. The problem was that the developer always assigned the text attribute as:

  ctx.textAlign = 'left'
  ctx.textBaseline = 'top'
  ctx.font = createFont(size, weight, family)
  ctx.fillStyle = color

And the coordinates were calculated based on this approach instead of utilizing the available properties for centering the text both vertically and horizontally, which are (ctx.textAlign = 'center' & ctx.textBaseline = 'middle').

To fix this issue, the developer should take advantage of these properties and recalculate the padding, width, height, and rectangle coordinates to ensure proper alignment.