JQuery/Javascript - 鼠标位置完全关闭

我试图做一个'绘制'应用程序，它允许用户通过拖动鼠标在画布上绘制某些东西。JQuery/Javascript - 鼠标位置完全关闭

但是，我想在用户拖动鼠标的地方绘制一个“像素”，但是：鼠标的位置和“像素”绘制的位置不一样。我在互联网上搜索过，但我不知道与我的版本和他们的版本有什么不同。

图片：

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Drawer</title> 
    <script src="jquery-2.2.1.min.js"></script> 
    <script src="scripting/draw.js"></script> 
</head> 
<body> 
    <canvas id="drawGround" style="width: 500px; height: 500px; margin: 0 auto; border: 1px solid black;"></canvas> 
</body> 
</html>

代码：

$(document).ready(function() { 
 

 
    var drawSize = 3; 
 
    var canDrawCanvas = false; 
 
    const canvasID = "#drawGround"; 
 

 
    document.onmouseup = function() { 
 
    canDrawCanvas = false; 
 
    }; 
 

 
    $(canvasID).mousedown(function() { 
 
    canDrawCanvas = true; 
 
    }); 
 
    $(canvasID).mousemove(function(event) { 
 
    if (canDrawCanvas) handleDrawing(event); 
 

 
    }); 
 

 
    function handleDrawing(mouseEvent) { 
 
    var canvas = document.getElementById(canvasID.substring(1)); 
 
    var context = canvas.getContext('2d'); 
 
    context.fillRect(mouseEvent.pageX, mouseEvent.pageY, drawSize, drawSize); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="drawGround" style="width: 500px; height: 500px; margin: 0 auto; border: 1px solid black;"></canvas>

来源

2016-03-10 Dub_

pageX属性和pageY给你的鼠标指针的位置在整个页面，而不是在所以你的画布试图找到/计算指针的相对位置，而不是绝对的。 – mitkosoft

使用'offsetX'和'offsetY'而不是'pageX'和'pageY' –

除了使用“style”属性缩放画布对象，您应该在canvas-element中使用“width”和“height”属性。

<canvas id="drawGround" width="500px" height="500px" style="margin: 0 auto; border: 1px solid black;"></canvas>

然后使用offsetX和offsetY参数，而不是pageX和pageY让鼠标前端的位置：

function handleDrawing(mouseEvent) { 
    var canvas = document.getElementById(canvasID.substring(1)); 
    var context = canvas.getContext('2d'); 
    context.fillRect(mouseEvent.offsetX, mouseEvent.offsetY, drawSize, drawSize); 
}

来源

2016-03-10 15:19:10 SebKas

JQuery/Javascript - 鼠标位置完全关闭

回答

相关问题