如何将 html table 与自定义 canvas 绘图对齐

Question

我需要构建一个 UI (HTML 5)，其中包含两个主要组件：在 HTML 5 canvas 中绘制的自定义图表； table.

问题是图表必须与 table 对齐。如果水平滚动 table，图表内容也会滚动。

一个重要的限制是图表是非常定制的。我将无法使用任何现有的图表组件。我将不得不自己编写代码并将其绘制在 canvas 上。

我正在努力弄清楚该怎么做。如何在滚动期间触发 canvas 上的重绘？如何知道每个table单元格开头的canvas对应的坐标？如何编写两个组件的 HTML/CSS 以确保布局不会在不同的屏幕尺寸上中断？

我仍在计划这个项目，我很愿意使用任何 framework/language。

我这里需要点亮光。

你能帮忙吗？

谢谢！

Answer 1

您可以使用 jQuery scrollLeft() 获取滚动位置，并将 canvas 重绘函数设置为 jquery scroll() 以便在滚动位置发生变化时更新。

table = $('#container')

updatePosition = () => {
  // Synchronize canvas here:
  repaintCanvas(table.scrollLeft());
}

table.scroll(updatePosition);

How to align html table to a customize canvas drawing