PDF.js PDFViewer 浮点数舍入误差：深入解读与解决方案

2024-03-01 18:46:35

PDF.js PDFViewer 中浮点数舍入误差的深入指南

问题介绍

在使用 PDF.js 的 PDFViewer 类时，您可能会遇到令人讨厌的错误消息：“--scale-factor” CSS 变量必须设置，与 “viewport.scale” 相同的值，可以在 “container” 元素本身或 DOM 中更高层次上设置。

背后的原因

罪魁祸首是浮点数的舍入误差，这是计算机在处理小数时固有的问题。viewport.scale 通常是一个精确的值，而用于设置 --scale-factor 的值可能稍有不同。这种差异导致了错误。

全面解决方案

解决此问题的关键在于确保 --scale-factor 的值始终与 viewport.scale 相同。当缩放 PDFViewer 或窗口大小时，需要更新 --scale-factor 的值。

避免 CSS 浮点

尽可能避免使用 CSS 浮点值。它们有时会因舍入问题而引起头痛。改用整数或固定精度值可以提高稳定性。

使用精确的数字类型

在 JavaScript 中，使用 Number.EPSILON 之类的精确数字类型可以帮助避免舍入误差。这些类型提供了更高的精度，从而减少了舍入差异。

利用舍入函数

JavaScript 提供了方便的 Math.round() 和 Math.floor() 函数，您可以使用它们来对浮点数进行舍入。这可以确保精度，防止舍入误差。

动态更新 --scale-factor

以下代码片段演示了如何动态更新 --scale-factor 以匹配 viewport.scale：

const updateScale = () => {
  const scale = viewer.currentScaleValue;
  viewerContainer.style.setProperty('--scale-factor', scale);
};
viewer.on('scalechange', updateScale);

此代码侦听 PDFViewer 的缩放更改事件，并在缩放发生时更新 --scale-factor。

其他提示

除了以上解决方案外，以下一些提示也可以帮助您避免浮点数舍入误差问题：

更新 PDF.js 版本： 最新版本可能已解决此问题或提供更好的舍入处理。
使用固定小数点表示法： 这可以减少浮点数舍入误差。
注意缩放级别： 使用较小的缩放增量可以降低舍入误差的影响。

常见问题解答

为什么在设置 --scale-factor 时需要使用精确的值？ 确保值与 viewport.scale 相同精度可以防止舍入误差。
我该如何避免使用 CSS 浮点值？ 使用整数或使用固定精度值（例如 0.5 或 1.25）。
使用 Number.EPSILON 有什么好处？ Number.EPSILON 提供了更精确的浮点数表示，从而减少了舍入误差。
Math.round() 和 Math.floor() 函数如何帮助解决这个问题？ 这些函数允许您对浮点数进行精确舍入，确保它们与 viewport.scale 具有相同精度。
动态更新 --scale-factor 的重要性是什么？ 当缩放 PDFViewer 或窗口大小时，更新 --scale-factor 值至关重要，以匹配新的 viewport.scale。