JS白板pointermove事件精度问题：硬角与断笔故障求助

你的核心问题在于手动节流pointermove事件导致丢失大量关键点位——你用固定的16.6ms间隔过滤事件，快速绘制硬角、文字时，很多构成细节的转折点会被丢弃，最终出现失真和断块。

修复方案一：移除节流逻辑，直接处理所有事件点 #

现代浏览器对pointermove事件的处理性能足够，完全不需要手动节流，直接捕获每一个事件点就能解决问题：

document.addEventListener("pointermove", moveMouse, false);
function moveMouse(e) {
    e.preventDefault();
    if (current_stroke != null) {
        current_stroke.addPoint(e.x, e.y, e.pressure);
        if (e.pressure === 0) {
            mouseUp();
        }
    }
}

修复方案二：用requestAnimationFrame批量绘制（兼顾性能与完整性） #

如果担心高频事件导致性能问题，可以用requestAnimationFrame批量处理事件点，但绝不丢弃任何点位——先把所有移动点存入缓冲区，再每帧统一绘制：

let pointsBuffer = [];
let rafId = null;

document.addEventListener("pointermove", moveMouse, false);
// 额外监听pointerup，确保最后一批点被绘制
document.addEventListener("pointerup", flushPoints);

function moveMouse(e) {
    e.preventDefault();
    if (current_stroke != null) {
        pointsBuffer.push({ x: e.x, y: e.y, pressure: e.pressure });
        if (e.pressure === 0) {
            mouseUp();
        }
        // 仅当没有正在执行的绘制任务时，启动批量绘制
        if (!rafId) {
            rafId = requestAnimationFrame(flushPoints);
        }
    }
}

function flushPoints() {
    if (pointsBuffer.length === 0) {
        rafId = null;
        return;
    }
    // 批量将缓冲区的点添加到当前笔画
    pointsBuffer.forEach(point => {
        current_stroke.addPoint(point.x, point.y, point.pressure);
    });
    pointsBuffer = [];
    rafId = null;
}

关键说明 #

• 方案一最直接，能100%保留所有绘制点位，彻底解决硬角失真和文字断块问题。
• 方案二适合高性能需求场景，既避免了频繁绘制的性能开销，又不会丢失任何关键转折点。
• 无论用哪种方案，都要确保current_stroke.addPoint方法能正确处理连续点位的连线逻辑（比如用直线连接相邻点，或用贝塞尔曲线平滑），这也是保证绘制流畅度的关键。

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