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 - 鼠標位置完全關閉

回答

相關問題