Нарисуйте более гладкие пути в HTML-холсте

Question

У меня есть скрипка здесь.

Когда пользователь нажимает мышь (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;
    });

Код объяснен здесь, и для демонстрации, пожалуйста, посетите скрипку, которую я упоминал ранее.

Удачного кодирования!