如何让Canvas自定义图像光标与鼠标/触摸点精准对齐？

问题根源分析 #

1. 坐标重复偏移计算：getCursorPosition已经通过getBoundingClientRect将鼠标/触摸坐标转换为画布内部的精确坐标，但后续绘制逻辑中又重复减去了canvasOffsetX/Y，导致坐标偏移。
2. 光标元素未正确定位：drawing-indicator缺少position: absolute样式，left和top属性无法生效，导致光标位置错误。
3. 光标坐标计算未匹配画布缩放：updateDrawingIndicator直接使用原始鼠标坐标，未应用画布的缩放比例，导致光标与绘制线条位置不匹配。

修复步骤及代码调整 #

1. 修正光标元素样式 #

给drawing-indicator添加绝对定位，避免干扰画布事件：

<img id="drawing-indicator" width="50" height="50" src="https://cdn-icons-png.flaticon.com/512/266/266146.png" style="display:none; position:absolute; pointer-events:none;">

2. 移除错误的坐标偏移计算 #

删除全局的canvasOffsetX/Y变量，修改绘制函数中的坐标逻辑：

修改后的startDrawing函数

const startDrawing = (x, y) => {
    isPainting = true;
    startX = x;
    startY = y;

    if (selectedTool === "pencil") {
        ctx.beginPath();
        ctx.moveTo(x, y); // 直接使用画布内部坐标
    } else if (selectedTool === "eraser") {
        ctx.clearRect(
            x - lineWidth / 2,
            y - lineWidth / 2,
            lineWidth,
            lineWidth
        );
    }

    updateDrawingIndicator(x, y);
};

修改后的draw函数

const draw = (x, y) => {
    if (!isPainting) {
        return;
    }

    if (selectedTool === "pencil") {
        ctx.lineTo(x, y); // 直接使用画布内部坐标
        ctx.stroke();
    } else if (selectedTool === "eraser") {
        ctx.clearRect(
            x - lineWidth / 2,
            y - lineWidth / 2,
            lineWidth,
            lineWidth
        );
    }
};

3. 修复光标位置计算 #

将画布坐标转换为页面坐标，并根据工具类型调整光标偏移（让笔尖/擦头对准绘制点）：

const updateDrawingIndicator = (canvasX, canvasY) => {
    const rect = canvas.getBoundingClientRect();
    const scaleX = rect.width / canvas.width;
    const scaleY = rect.height / canvas.height;
    // 画布坐标转页面坐标
    const pageX = rect.left + canvasX * scaleX;
    const pageY = rect.top + canvasY * scaleY;
    
    // 根据工具调整偏移
    let offsetX, offsetY;
    if (selectedTool === "pencil") {
        offsetX = drawingIndicator.width / 2;
        offsetY = drawingIndicator.height; // 铅笔笔尖在底部，偏移整个高度
    } else {
        offsetX = drawingIndicator.width / 2;
        offsetY = drawingIndicator.height / 2; // 橡皮擦中心对准鼠标
    }
    
    drawingIndicator.style.left = (pageX - offsetX) + "px";
    drawingIndicator.style.top = (pageY - offsetY) + "px";
};

4. 优化画布初始化与自适应 #

添加窗口 resize 监听，保证画布尺寸自适应：

// 初始化画布尺寸
const resizeCanvas = () => {
    const rect = canvas.getBoundingClientRect();
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - rect.top; // 避免覆盖按钮区域
};
resizeCanvas();
window.addEventListener("resize", resizeCanvas);

完整修复后的JavaScript代码 #

const clear = document.querySelector("#clear");
const pencil = document.querySelector("#pencil");
const eraser = document.querySelector("#eraser");
const canvas = document.getElementById("drawing-board");
const ctx = canvas.getContext("2d");
const drawingIndicator = document.querySelector("#drawing-indicator");

let selectedTool = "pencil";
const pencilImage = "https://cdn-icons-png.flaticon.com/512/266/266146.png";
const eraserImage =
    "https://creazilla-store.fra1.digitaloceanspaces.com/cliparts/33173/eraser-clipart-md.png";
let isPainting = false;
let lineWidth = 5;
let startX;
let startY;

let isDrawingIndicatorVisible = false;

// 画布尺寸自适应
const resizeCanvas = () => {
    const rect = canvas.getBoundingClientRect();
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - rect.top;
};
resizeCanvas();
window.addEventListener("resize", resizeCanvas);

clear.addEventListener("click", (e) => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

pencil.addEventListener("click", (e) => {
    selectedTool = "pencil";
    ctx.strokeStyle = "#000000";
    lineWidth = 5;
    drawingIndicator.src = pencilImage;
    drawingIndicator.style.display = "block";
});

eraser.addEventListener("click", (e) => {
    selectedTool = "eraser";
    ctx.strokeStyle = "#ffffff";
    lineWidth = 25;
    drawingIndicator.src = eraserImage;
    drawingIndicator.style.display = "block";
});

const startDrawing = (x, y) => {
    isPainting = true;
    startX = x;
    startY = y;

    if (selectedTool === "pencil") {
        ctx.beginPath();
        ctx.moveTo(x, y);
    } else if (selectedTool === "eraser") {
        ctx.clearRect(
            x - lineWidth / 2,
            y - lineWidth / 2,
            lineWidth,
            lineWidth
        );
    }

    updateDrawingIndicator(x, y);
};

const stopDrawing = () => {
    isPainting = false;
    ctx.stroke();
    ctx.beginPath();
};

const draw = (x, y) => {
    if (!isPainting) {
        return;
    }

    if (selectedTool === "pencil") {
        ctx.lineTo(x, y);
        ctx.stroke();
    } else if (selectedTool === "eraser") {
        ctx.clearRect(
            x - lineWidth / 2,
            y - lineWidth / 2,
            lineWidth,
            lineWidth
        );
    }
};

const updateDrawingIndicator = (canvasX, canvasY) => {
    const rect = canvas.getBoundingClientRect();
    const scaleX = rect.width / canvas.width;
    const scaleY = rect.height / canvas.height;
    const pageX = rect.left + canvasX * scaleX;
    const pageY = rect.top + canvasY * scaleY;
    
    let offsetX, offsetY;
    if (selectedTool === "pencil") {
        offsetX = drawingIndicator.width / 2;
        offsetY = drawingIndicator.height;
    } else {
        offsetX = drawingIndicator.width / 2;
        offsetY = drawingIndicator.height / 2;
    }
    
    drawingIndicator.style.left = (pageX - offsetX) + "px";
    drawingIndicator.style.top = (pageY - offsetY) + "px";
};

const getCursorPosition = (event) => {
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;
    const x = (event.clientX - rect.left) * scaleX;
    const y = (event.clientY - rect.top) * scaleY;
    return { x, y };
};

canvas.addEventListener("mousedown", (e) => {
    if (!isPainting) {
        const { x, y } = getCursorPosition(e);
        startDrawing(x, y);
        isDrawingIndicatorVisible = true;
        drawingIndicator.style.display = "block";
    }
});

canvas.addEventListener("mouseup", (e) => {
    if (isPainting) {
        stopDrawing();
        isDrawingIndicatorVisible = false;
    }
});

canvas.addEventListener("mousemove", (e) => {
    const { x, y } = getCursorPosition(e);
    if (isPainting) {
        draw(x, y);
    }
    updateDrawingIndicator(x, y); // 鼠标移动时实时更新光标位置
});

canvas.addEventListener("touchstart", (e) => {
    e.preventDefault(); // 阻止触摸滚动
    if (!isPainting) {
        const { x, y } = getCursorPosition(e.touches[0]);
        startDrawing(x, y);
        isDrawingIndicatorVisible = true;
        drawingIndicator.style.display = "block";
    }
});

canvas.addEventListener("touchend", (e) => {
    if (isPainting) {
        stopDrawing();
        isDrawingIndicatorVisible = false;
    }
});

canvas.addEventListener("touchmove", (e) => {
    e.preventDefault();
    if (isPainting) {
        const { x, y } = getCursorPosition(e.touches[0]);
        draw(x, y);
        updateDrawingIndicator(x, y);
    }
});

关键修复点总结 #

• 光标元素添加position: absolute和pointer-events:none，确保定位正确且不干扰画布事件
• 移除绘制逻辑中重复的坐标偏移计算，直接使用getCursorPosition返回的画布内部坐标
• 光标位置计算需将画布坐标转换为页面坐标，并根据工具类型调整偏移量，让视觉尖端对准绘制点
• 添加窗口resize监听，保证画布尺寸自适应窗口变化

内容的提问来源于stack exchange，提问作者Rafael de Castro