如何用jQuery的mousemove事件实现随鼠标移动延伸的线条绘制？

嘿，我来帮你搞定这个实时绘制线条的问题！你现在遇到的情况应该是代码只在mouseup事件触发时才完成线条的渲染，所以看不到拖拽过程中的实时延伸效果。咱们调整一下逻辑，让线条在mousemove时动态更新就行，完全不用canvas，纯jQuery实现。

核心思路 #

1. 在鼠标按下（mousedown）时，记录起点坐标，同时创建一个初始的线条元素；
2. 鼠标移动（mousemove）过程中，只要处于绘制状态，就实时计算当前鼠标位置与起点的距离和角度，动态更新线条的长度和方向；
3. 鼠标松开（mouseup）时，结束绘制状态。

完整实现代码 #

首先准备一个承载绘制的容器：

<div id="draw-area" style="width: 800px; height: 600px; border: 1px solid #ccc; position: relative;"></div>

然后是jQuery逻辑：

$(document).ready(function() {
    let isDrawing = false; // 标记是否处于绘制状态
    let startX, startY;    // 线条起点坐标
    let currentLine;       // 当前正在绘制的线条元素

    // 鼠标按下开始绘制
    $("#draw-area").mousedown(function(e) {
        isDrawing = true;
        // 获取鼠标在容器内的相对坐标（offsetX/Y是相对于当前元素的）
        startX = e.offsetX;
        startY = e.offsetY;

        // 创建新的线条元素，初始状态是起点处的一个1px宽的线段
        currentLine = $("<div>").css({
            position: "absolute",
            backgroundColor: "#2196F3", // 线条颜色，可自定义
            width: "1px",
            height: "0",
            top: `${startY}px`,
            left: `${startX}px`,
            transformOrigin: "top left" // 旋转原点设为线条起点
        }).appendTo(this);
    });

    // 鼠标移动时实时更新线条
    $("#draw-area").mousemove(function(e) {
        if (!isDrawing) return; // 没在绘制状态就跳过

        const endX = e.offsetX;
        const endY = e.offsetY;

        // 计算线条的长度（两点间距离公式）
        const lineLength = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
        // 计算线条的旋转角度（弧度转角度）
        const lineAngle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;

        // 动态更新线条的长度和角度
        currentLine.css({
            height: `${lineLength}px`,
            transform: `rotate(${lineAngle}deg)`
        });
    });

    // 鼠标松开结束绘制
    $(document).mouseup(function() {
        isDrawing = false;
        currentLine = null; // 清空当前线条引用
    });
});

关键细节说明 #

• 容器必须设置position: relative，这样线条的绝对定位是相对于容器的，不会跑到页面其他位置；
• 用transformOrigin: "top left"确保线条围绕起点旋转，这样拖拽鼠标时线条会从起点开始延伸；
• 每次mousedown都会创建新的线条元素，支持连续绘制多条线条；
• 你可以自定义线条的颜色、宽度（调整width属性），甚至添加圆角、阴影等样式。

这样调整后，你拖拽鼠标的时候就能看到线条实时跟着鼠标延伸啦！

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