Question

我正在使用HTML5画布创建绘图应用程序。它可以接受一件事。绘图发生在光标下方/右下方~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像素，那么您将在错误的位置绘图。

此外，您不希望在mousemove中同时使用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

您可以分别从X坐标和Y坐标中减去画布的offsetLeft和offsetTop来获得准确的鼠标坐标。另一方面，想象一下，如果在ms画画或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);

您可以在行动here中看到它。单击并拖动以绘制。

<小时/> 我希望这有用。

使用画布绘图不遵循光标

3 个答案: