Question

我有一个小提琴Here。

当用户按下鼠标（mousedown）然后在不释放鼠标的情况下移动鼠标时，我绘制路径，然后是鼠标。但是当鼠标移动得非常快时，绘制的路径就不再平滑了。

// this part is drawing the path

            ctx1.save();
            ctx1.beginPath();
            ctx1.moveTo(loc.x, loc.y);
            ctx1.lineTo(loc.x + dX, loc.y + dY);
            ctx1.stroke();

有没有办法让鼠标移动更顺畅？

现在请忽略糟糕的编程风格。

任何帮助都会很棒。谢谢

Answer 1

我改变你的d.onmousemove看起来像这样：

d.onmousemove = function(event) {
    var loc = getMousePos(c, event);
    // nothing is using dX and dY, removed
    if (drawState) {
        if (drawProps.tool === "pencil") {
            ctx1.save();
            ctx1.beginPath();
            ctx1.moveTo(lastX, lastY);// was loc.x and loc.y
            ctx1.lineTo(loc.x, loc.y);// was loc.x + dX and loc.y + dY
            ctx1.stroke();
        } else if (drawProps.tool === "line") {
            ctx.clearRect(0, 0, c.width, c.height);
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(loc.x, loc.y);
            ctx.stroke();
            ctx.closePath();
            ctx.save();
        }
    }
    // Moved to after the if instead of before it
    lastX = loc.x;
    lastY = loc.y;
};

Answer 2

试试这个：

的 JS FIDDLE

我已经做了一些工作，所以现在是时候帮助你了。代码背后的主要内容是跟踪鼠标指针并捕获它。

只有在鼠标停机并移动时才需要进行拖拽。为此目的，请执行：

var drawing =false;//initially

在此之后每当按下鼠标左键时，保持跟踪为：

canvas.on('mousedown',function(e){ e.preventDefault(); drawing = true; prev.x = e.pageX; prev.y = e.pageY; });

当用户按下鼠标左键移动时，您可以跟踪鼠标指针并相应地绘制。它将绘制从最后一个点到当前鼠标指针的线，这样它将处理平滑绘制，即连续路径。

doc.on('mousemove',function(e){ // Draw a line for the current user's movement if(drawing){ drawLine(prev.x, prev.y, e.pageX, e.pageY); prev.x = e.pageX; prev.y = e.pageY; } }); //function drawing line with color and width set as variables, feel free to change function drawLine(fromx, fromy, tox, toy){ ctx.beginPath(); ctx.lineWidth = globalBrushSize; ctx.strokeStyle = globalBrushColor; ctx.moveTo(fromx, fromy); ctx.lineTo(tox, toy); ctx.stroke(); }

最后，当释放按下鼠标按钮时，只需将强制条件反转为绘制线条。

doc.bind('mouseup mouseleave',function(){ drawing = false; });

此处解释了代码，对于演示，请访问我之前提到的小提琴。

快乐的编码！

在html画布中绘制更平滑的路径

2 个答案:

的 JS FIDDLE