JSXGraph NumberLine、React&Storybook：如何保持响应 dsn 的纵横比恒定 (1:1) b-n 水平和垂直单位（x 和 y 缩放 eq-ly）？

Question

使用 React 和 Storybook 的 JSXGraph Number Line：当板的高度设置为 400px 时，如何保持水平和垂直单位之间的纵横比恒定 (1:1)（这意味着 x 和 y 轴缩放相等）以实现响应式设计，宽度设置为100%？我需要计算出 JSXGraph 数轴缩放比例，以便可以正确按比例渲染（我需要水平和垂直单位大小之间的比率恒定为 1:1），而不需要正方形宽度和高度尺寸。也许，这涉及到 svg viewbox 的探索，或者计算和应用动态纵横比？

尝试利用“keepAspectRatio：true”属性，但数轴在调整屏幕大小时扩展了其边界，这是不可接受的。请告知可能的解决方案

Answer 1

纯 JavaScript 中的一个可能的解决方案是启动一个 ResizeObserver。

在其事件侦听器中，可以确定托管 JSXGraph 板的

div

的实际大小。这可以用在

的调用中

board.setBoundingBox([l, t, r, b], true);