HTML考试答题区域映射页面如何实现-html教程-PHP中文网

答题区域映射是将试卷图片或pdf渲染画布上的坐标与题号、小题号精确绑定的技术；直接用div布局会导致缩放失准、设备像素比干扰及pdf渲染差异三大问题。

html考试答题区域映射页面如何实现

什么是答题区域映射，为什么不能直接用 `div` 布局

答题区域映射本质是把一张试卷图片（或 PDF 渲染后的画布）上的坐标位置，和后台题号、小题号精确绑定。用户点击某块区域，系统必须知道“点的是第 3 题第 2 小问”。直接用 div 绝对定位叠在图片上，看似简单，但会出三类问题：缩放失准（浏览器 zoom 或响应式缩放后坐标偏移）、设备像素比干扰（Retina 屏下 getBoundingClientRect() 返回的 clientX/Y 和 canvas 像素不一致）、无法适配 PDF 渲染差异（如 pdf.js 渲染后页面流式布局导致容器尺寸浮动）。

用 `canvas` + `getTransform()` 实现像素级坐标对齐

核心思路：把试卷作为 canvas 背景图绘制，所有答题区域用路径（Path2D）定义，点击时用 isPointInPath() 判断落点。这样坐标始终基于 canvas 像素空间，绕过 CSS 布局干扰。

加载试卷图后，先调用 canvas.getContext('2d').drawImage(img, 0, 0)，确保图像铺满 canvas 且无拉伸
每个题区用 new Path2D('M100,200 L150,200 L150,240 L100,240 Z') 定义，坐标单位是 canvas 像素（不是 CSS px）
监听 canvas 的 click 事件，用 canvas.getBoundingClientRect() 换算点击位置：const rect = canvas.getBoundingClientRect(); const x = (e.clientX - rect.left) * canvas.width / rect.width;
注意：必须在 canvas 上设置 style="image-rendering: pixelated;" 防止图像插值模糊导致路径判断失效

如何处理 PDF 试卷（pdf.js 场景下映射失效）

pdf.js 渲染的页面里，每页是独立 canvas，但它的 scale 值由 PDFPage.getViewport() 决定，且可能随 zoom 变化。硬编码坐标会立刻失效。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

不要手动写死坐标，改用 PDFPage.getViewport({ scale: 1.0 }).width 获取原始宽度，再按比例换算题区坐标
把题区配置存成相对坐标（如 { left: 0.32, top: 0.45, width: 0.2, height: 0.08 }），渲染时乘以当前 viewport 的 width 和 height
监听 pdfjsLib.GlobalEventBus 的 'pagesloaded' 和 'zoomchanged' 事件，触发重绘路径
避免用 page.render() 后直接取 DOM 尺寸——它返回的是渲染后 canvas 的 display 尺寸，不是逻辑像素尺寸