Рисование холстом не следует за курсором

Question

Я создаю приложение для рисования с помощью HTML5 canvas.Это работает принять за одну вещь.Рисование происходит как ~ 50px вниз / вправо от курсора.Ниже мой код, можно ли сказать, почему это происходит?

var letsdraw = false;

var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
theCanvas.width  = 420;
theCanvas.height = 300;


$('#paint').mousemove(function(e) {
    if (letsdraw === true){
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 100;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(e.pageX, e.pageY);
        ctx.lineTo(e.pageX, e.pageY);           
        ctx.stroke();
    }
});

$('#paint').mousedown(function(){
    letsdraw = true;
});

$('#paint').mouseup(function(){ 
    letsdraw = false;
});

Answer 1

Я вижу пару вещей. Во-первых, для вашей основной проблемы вы смотрите только на pageX и pageY, но не учитываете смещение холста. Таким образом, если холст на странице размером 50 пикселей, вы будете рисовать не в том месте.

Кроме того, вы не захотите использовать moveTo и lineTo для перемещения мыши, так как это неверный синтаксис. Вы в основном говорите «нарисуйте линию от точки (x, y) до (x, y). Вот обновленный бит кода для вас, вы можете найти jsfiddle для него здесь: http://jsfiddle.net/fordlover49/wPx4d/

$(function() {
    var letsdraw = false;

    var theCanvas = document.getElementById('paint');
    var ctx = theCanvas.getContext('2d');
    theCanvas.width = 420;
    theCanvas.height = 300;

    var canvasOffset = $('#paint').offset();

    $('#paint').mousemove(function(e) {
        if (letsdraw === true) {
            ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
            ctx.stroke();
        }
    });

    $('#paint').mousedown(function() {
        // setup all of the properties for your line on mousedown, not mousemove
        letsdraw = true;
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 10;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
    });

    $(window).mouseup(function() {
        // bind to the window mouse up, that way if you mouse up and you're not over 
        // the canvas you'll still get the release of the drawing.
        letsdraw = false;
    });
});

Answer 2

Чтобы получить точное положение мыши, вам понадобятся некоторые вычисления.Я не знаю, есть ли другой способ, но обычно он используется

function getMousePoint(ex, ey){

    var px = 0, py = 0;
    var el = document.getElementById('paint');
    while (el) {
         px += el.offsetLeft;
         py += el.offsetTop;
         el = el.offsetParent;
     }

    return {x: ex-px ,y: ey-py};
}

Используйте эту функцию для получения точки для рисования

    var mp = getMousePoint(e.pageX, e.pageY);
    ctx.moveTo(mp.x, mp.y);
    ctx.lineTo(mp.x, mp.y);

Это должно исправитьвыпуск.

Answer 3

Вы можете получить точные координаты мыши, вычитая offsetLeft и offsetTop холста из координат X и Y соответственно.С другой стороны, представьте себе, что если в ms paint или photoshop вы рисовали только путем перемещения мыши, и не имело значения, была ли у вас кнопка мыши нажатой, она все равно рисовала бы.Разве это не было бы раздражающим и не интуитивным?Вместо этого вы можете извлекать соответствующие данные из событий мыши и проверять их с интервалом.

К счастью, такого рода вещи достаточно просты для того, чтобы такие библиотеки, как jQuery и prototype не былидействительно необходимо, и это можно сделать в «сыром» JavaScript.

Вот мой удар, например:

var mouse = [0,0], mouseDown = false, last = [0,0], fps = 24
ctx = canvas.getContext('2d');
getMouse = function(e){
    var X,Y;
    X = e.pageX || e.clientX || e.offsetX;
    Y = e.pageY || e.clientY || e.offsetY;
    X = X - canvas.offsetLeft;
    Y = Y - canvas.offsetTop;
    mouse = [X,Y];
}
canvas.onmousedown = function(e){
    getMouse(e);
    mouseDown = true;
    last = mouse;
}
canvas.onmouseup = function(){
    mouseDown = false;
}
canvas.onmousemove = getMouse;
setInterval(function(){
    if(mouseDown){
        ctx.beginPath();
        ctx.moveTo(last[0],last[1]);
        ctx.lineTo(mouse[0],mouse[1]);
        ctx.stroke();
        ctx.closePath();
        last = mouse;
    }
},1000/fps);

Вы можете увидеть это в действии здесь .Нажмите и перетащите, чтобы нарисовать.

---

Надеюсь, это полезно.