如何跨浏览器与操作系统检测手写笔pointerType及按键状态？

问题修复思路 #

针对各浏览器的兼容性问题，核心修复方向如下：

1. Windows Chrome/Edge悬停绘制问题：仅当手写笔**接触屏幕（pressure>0）**时才启动绘制，同时监听pointerout/pointerleave事件强制终止绘制，避免悬停时无法触发pointerup的情况。
2. Linux Chromium按键值错误：放弃依赖event.button的固定值，改用event.buttons的位掩码检测按键状态（位2对应选择键，位5对应橡皮擦键）。
3. Linux Firefox手写笔识别错误：结合event.pressure（手写笔接触时pressure>0，鼠标始终为0）和pointerType做双重判断，降级兼容设备识别异常的情况。

修复后的Svelte代码 #

<script>
    import { onMount } from "svelte";

    export let thickness, color, defaultColor = "#000000", eraseColor = "#ffffff";
    let canvas;
    let ctx;
    let isDrawing = false;
    let currentTool = "pen"; // pen/select/erase

    onMount(() => {
        ctx = canvas.getContext("2d");
        resizeCanvas();
        window.addEventListener("resize", resizeCanvas);
        return () => window.removeEventListener("resize", resizeCanvas);
    });

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        // 保留原有绘制内容（可选）
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.putImageData(imageData, 0, 0);
    }

    // 判断是否为有效手写笔输入
    function isValidPenInput(e) {
        // 优先用pointerType，否则用pressure判断（兼容Linux Firefox）
        const isPen = e.pointerType === "pen" || (e.pressure > 0 && e.pointerType !== "mouse");
        // 仅当接触屏幕时才视为有效输入（解决Chrome/Edge悬停问题）
        return isPen && e.pressure > 0;
    }

    // 检测手写笔按键状态
    function detectPenButton(e) {
        // buttons是位掩码：位2=选择键（值4），位5=橡皮擦键（值32）
        if (e.buttons & 32) {
            return "erase";
        } else if (e.buttons & 4) {
            return "select";
        }
        return "pen";
    }

    function startDrawing(e) {
        if (!isValidPenInput(e)) return;
        
        currentTool = detectPenButton(e);
        isDrawing = true;

        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        ctx.beginPath();
        ctx.moveTo(x, y);
        // 根据工具设置样式
        ctx.strokeStyle = currentTool === "erase" ? eraseColor : color || defaultColor;
        ctx.lineWidth = currentTool === "erase" ? thickness * 2 : thickness;
    }

    function draw(e) {
        if (!isDrawing || !isValidPenInput(e)) return;

        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        ctx.lineTo(x, y);
        ctx.stroke();
    }

    function stopDrawing() {
        if (isDrawing) {
            ctx.closePath();
            isDrawing = false;
            currentTool = "pen";
        }
    }
</script>

<canvas
    bind:this={canvas}
    on:pointerdown={startDrawing}
    on:pointermove={draw}
    on:pointerup={stopDrawing}
    on:pointerout={stopDrawing}
    on:pointerleave={stopDrawing}
    style="display:block; width:100%; height:100%;"
></canvas>

关键修改说明 #

• 手写笔有效性判断：通过e.pressure > 0确保只有接触屏幕时才触发绘制，解决Chrome/Edge悬停误触发的问题；同时兼容Linux Firefox无法识别pointerType为pen的情况。
• 按键状态检测：使用e.buttons位掩码替代e.button，位掩码值更稳定，避免不同浏览器/系统下的按键值差异（选择键对应4，橡皮擦键对应32）。
• 事件补全：新增pointerout/pointerleave事件监听，确保手写笔移出Canvas区域时能终止绘制。
• 工具切换逻辑：根据按键状态自动切换画笔/选择/橡皮擦工具，同时调整对应样式（橡皮擦用背景色、加粗线条）。

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