在画布中实际的鼠标位置 [英] Real mouse position in canvas
问题描述
function createImageOnCanvas（imageId）{
document.getElementById（imgCanvas）。 display =block;
document.getElementById（images）。style.overflowY =hidden;
var canvas = document.getElementById（imgCanvas）;
var context = canvas.getcontext（2d）;
var img = new Image（300,300）;
img.src = document.getElementById（imageId）.src;
context.drawImage（img，（0），（0））;
}
function draw（e）{
var canvas = document.getElementById（imgCanvas）;
var context = canvas.getContext（2d）;
posx = e.clientX;
posy = e.clientY;
context.fillStyle =＃000000;
context.fillRect（posx，posy，4，4）;
}
HTML部分
$ b
< body>
< div id =images>
< / div>
< canvas onmousemove =draw（event）style =margin：0; padding：0; id =imgCanvas
class =canvasViewwidth =250height =250>< / canvas>
我读了一个方法在JavaScript中创建一个简单的函数来获得正确的位置，不知道如何做到。
您可以使用以下代码段获取鼠标位置：
function getMousePos（canvas，evt）{
var rect = canvas.getBoundingClientRect（）;
return {
x：evt.clientX - rect.left，
y：evt.clientY - rect.top
};
}
只需从事件中调用它，事件和canvas作为参数。它返回一个对象，x和y为鼠标位置。
由于鼠标位置是相对于整个窗口必须减去元素的位置（这里：canvas），以获得它相对于元素。
您的代码中集成的示例：
//把它放在事件循环外面。
var canvas = document.getElementById（imgCanvas）;
var context = canvas.getContext（2d）;
function draw（e）{
var pos = getMousePos（canvas，e）;
posx = pos.x;
posy = pos.y;
context.fillStyle =＃000000;
context.fillRect（posx，posy，4，4）;
}
更新在canvas元素使用CSS缩放到与位图不同的大小的情况下，它代表：
function getMousePos（canvas，evt ）{
var rect = canvas.getBoundingClientRect（），// abs。元素的大小
scaleX = canvas.width / rect.width，//关系位图与元素X
scaleY = canvas.height / rect.height; //关系位图与元素Y
return {
x：（evt.clientX - rect.left）* scaleX，//缩放鼠标坐标后，它们有
y： evt.clientY - rect.top）* scaleY //已被调整为相对于元素
}
}
I'm trying to draw with the mouse over a HTML5 canvas, but the only way that it seems to work well is if the canvas is in the position 0,0 (upper left corner) if I change the canvas position, for some reason it doesn't draw like it should. Here is my code.
function createImageOnCanvas(imageId){
document.getElementById("imgCanvas").style.display = "block";
document.getElementById("images").style.overflowY= "hidden";
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
var img = new Image(300,300);
img.src = document.getElementById(imageId).src;
context.drawImage(img, (0),(0));
}
function draw(e){
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
posx = e.clientX;
posy = e.clientY;
context.fillStyle = "#000000";
context.fillRect (posx, posy, 4, 4);
}
The HTML part
<body>
<div id="images">
</div>
<canvas onmousemove="draw(event)" style="margin:0;padding:0;" id="imgCanvas"
class="canvasView" width="250" height="250"></canvas>
I have read there's a way of creating a simple function in JavaScript to get the right position, but I have no idea about how to do it.
You can get the mouse positions by using this snippet:
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
Just call it from your event with the event and canvas as arguments. It returns an object with x and y for the mouse positions.
As the mouse position you are getting is relative to the whole window you'll have to subtract the position of the element (here: canvas) to get it relative to the element. Canvas offers a neat boundary object which makes this rather simple as shown above.
Example of integration in your code:
//put this outside the event loop..
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
function draw(e){
var pos = getMousePos(canvas, e);
posx = pos.x;
posy = pos.y;
context.fillStyle = "#000000";
context.fillRect (posx, posy, 4, 4);
}
Update I'll include a variant here addressing scaling problems in cases where the canvas element is scaled using CSS to a different size than the bitmap it represents:
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect(), // abs. size of element
scaleX = canvas.width / rect.width, // relationship bitmap vs. element for X
scaleY = canvas.height / rect.height; // relationship bitmap vs. element for Y
return {
x: (evt.clientX - rect.left) * scaleX, // scale mouse coordinates after they have
y: (evt.clientY - rect.top) * scaleY // been adjusted to be relative to element
}
}
这篇关于在画布中实际的鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
