如何将PDF.js Canvas中鼠标像素坐标转换为PDF点？

我用PDF.js在网页Canvas中渲染PDF，通过鼠标拖拽获取客户端X位置的代码如下：

var rect = canvas.getBoundingClientRect();
return e.clientX - rect.left

这个代码返回的是像素单位的位置。现在需要用PDF.js在PDF中渲染图形，库要求X位置必须是PDF Points单位，但目前只能拿到Canvas中鼠标在渲染PDF上的X像素位置，示例代码如下：

const button = form.createTextField("ctrl_22");
button.addToPage( firstPage, {
    x: 200 // 这里需要是POINTS单位
  })

请问有没有方法把获取到的clientX转换为PDF点？

可以转换，核心是找到Canvas渲染PDF时的缩放比例，用像素位置除以该比例就能得到PDF Points，具体步骤如下：

• 获取PDF.js的渲染缩放因子
  PDF.js渲染页面时会有明确的缩放比例，你可以从初始化渲染的配置中直接获取，或者从已渲染的页面实例中读取：

  // 方式1：从初始化渲染的配置中获取（假设你设置了scale变量）
  const scale = 1.5;
  // 方式2：从已渲染的页面实例中获取当前缩放比例
  const currentScale = page.viewport.scale;
  

• 计算像素位置到PDF Points的转换
  用你已经拿到的Canvas内X像素位置，除以缩放因子即可得到对应的PDF Points：

  var rect = canvas.getBoundingClientRect();
  const canvasX = e.clientX - rect.left;
  const pdfPointX = canvasX / currentScale;
  

• 应用转换结果
  把计算后的pdfPointX传入图形渲染代码即可：

  const button = form.createTextField("ctrl_22");
  button.addToPage(firstPage, {
      x: pdfPointX // 已转换为PDF Points单位
  })
  

注意：如果Canvas存在额外的页面滚动偏移、自身内边距/外边距，要确保canvasX是完全相对于PDF渲染区域的准确像素位置，避免转换出现误差。

内容的提问来源于stack exchange，提问作者user2404597