从鼠标点击比较的坐标 [英] coordinates from mouseclick comparison
问题描述
代码链接
1.以下代码在html5上绘制一个圆圈画布并添加事件列表以获取鼠标点击。无法区分圈内的鼠标点击。
< body>
< canvas id =canvasonclick =handleEvent（）>< / canvas>
< / body>
body {
background：＃3e3e3e;
}
#canvas {
background：white;
height：400px;
width：400px;
border：2px纯黄色;
window.onload = function（）{
var canvas = document.getElementById（'canvas'）;
var ctx = canvas.getContext（'2d'）;
var cx = canvas.width / 2;
var cy = canvas.height / 2;
var r = 20;
//圆形绘制函数
ctx.beginPath（）;
ctx.arc（cx，cy，r，0,2 * Math.PI，false）;
ctx.stroke（）;
}
//函数获得鼠标点击坐标
函数handleEvent（e）
{
var evt = e？ E：window.event;
var clickX = 0，clickY = 0;
if（evt.pageX || evt.pageY）
{
clickX = evt.pageX;
clickY = evt.pageY;
if（180
alert（你在圈内）;
alert（evt.type.toUpperCase（）+'mouse event：'
+'\\\
pageX ='+ clickX
+'\ n pageY ='+ clickY
）
return false;
}
少数你现有的代码有问题：
注意你的圆圈是垂直拉伸的。这是因为画布的默认大小是300px宽和150px高。当您使用CSS将其大小设置为400x400时，画布不成比例地伸展。为避免这种情况，可以在画布标记或JavaScript中设置画布大小，而不是在CSS中。
//在html $中b $ b< canvas id =canvaswidth =400pxheight =400px>< / canvas>
//在javascript中（在任何绘图前执行此操作）
var canvas = document.getElementById（canvas）;
canvas.width = 400;
canvas.height = 400;
由于您正在测试在画布坐标（而不是窗口坐标）中生成的圆，您必须在画布坐标中获得鼠标点击的位置。这是一个两步过程。
首先，获取相对于窗口的画布位置。
var canvas = document.getElementById（canvas）;
var offsetX = canvas.offsetLeft;
var offsetY = canvas.offsetTop;
其次，在处理鼠标点击时，您可以像这样获得画布相对的鼠标位置：
var evt = e？ E：window.event;
clickX = evt.clientX-offsetX;
clickY = evt.clientY-offsetY;
这是一个更好的命中测试版本。这使用勾股定律来查看鼠标点击是否在圆的半径内：
var dx = cx-clickX;
var dy = cy-clickY;
如果（dx * dx + dy * dy <= r * r）
{
alert（你在圈内）;
（可选）这里是如何使用javascript来监听点击事件canvas：
canvas.addEventListener（click，handleEvent）;
（可选）您可以看看jQuery，它是一个可靠的优秀库，浏览器的差异，所以你不必这样做：
var evt = e？ E：window.event;
这里是代码和小提琴： http://jsfiddle.net/m1erickson/zLzwU/
<！doctype html>
< html>
< head>
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/> <！ - 重置css - >
< script type =text / javascriptsrc =http://code.jquery.com/jquery.min.js>< / script>
< style>
body {
background：＃3e3e3e;
}
#canvas {
background：white;
border：2px纯黄色;
}
< / style>
< script>
window.onload = function（）{
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
var offsetX = canvas.offsetLeft;
var offsetY = canvas.offsetTop;
var cx = canvas.width / 2;
var cy = canvas.height / 2;
var r = 20;
ctx.beginPath（）;
ctx.arc（cx，cy，r，0,2 * Math.PI，false）;
ctx.closePath（）;
ctx.stroke（）;
函数handleEvent（e）{
var evt = e？ E：window.event;
clickX = evt.clientX-offsetX;
clickY = evt.clientY-offsetY;
var dx = cx-clickX;
var dy = cy-clickY;
如果（dx * dx + dy * dy <= r * r）
{
alert（你在圈内）;
}
return false;
}
canvas.addEventListener（click，handleEvent）;
}; //结束init;
< / script>
< / head>
< body>
< canvas id =canvaswidth =400pxheight =400px>< / canvas>
< / body>
< / html>
link for the code
1.the following code draws a circle on html5 canvas and adds an event listner for getting the mouse clicks. the mouse clicks inside the circle cannot be distinguished from those outside the circle..
<body>
<canvas id="canvas" onclick="handleEvent()"></canvas>
</body>
body{
background: #3e3e3e;
}
#canvas{
background:white;
height: 400px;
width: 400px;
border: 2px solid yellow;
}
window.onload=function(){
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var cx=canvas.width/2;
var cy=canvas.height/2;
var r=20;
//circle draw function
ctx.beginPath();
ctx.arc(cx,cy,r,0,2*Math.PI,false);
ctx.stroke();
}
//function to get mouse click coordinates
function handleEvent(e)
{
var evt = e ? e:window.event;
var clickX=0, clickY=0;
if (evt.pageX || evt.pageY)
{
clickX = evt.pageX;
clickY = evt.pageY;
}
if(180<evt.pageX<220)
{
alert("you are inside the circle");
}
alert (evt.type.toUpperCase() + ' mouse event:'
+'\n pageX = ' + clickX
+'\n pageY = ' + clickY
)
return false;
}
解决方案 A few gotchas with your existing code:
Notice that your "circle" is stretched vertically. That’s because the default size of a canvas is 300px wide and 150px high. When you use CSS to size it to 400x400 the canvas stretches disproportionally. To avoid this, either set your canvas size in the canvas tag or in javascript rather than in CSS.
// in html
<canvas id="canvas" width="400px" height="400px"></canvas>
// in javascript (do this before any drawing)
var canvas=document.getElementById("canvas");
canvas.width=400;
canvas.height=400;
Since you are hit-testing a circle that was generated in canvas coordinates (rather than window coordinates), you must get the position of your mouseclick in canvas coordinates too. This is a 2 step process.
First, get the position of the canvas relative to the window
var canvas=document.getElementById("canvas");
var offsetX=canvas.offsetLeft;
var offsetY=canvas.offsetTop;
Second, when handling mouseclicks you can get the canvas-relative mouse position like this:
var evt = e ? e:window.event;
clickX = evt.clientX-offsetX;
clickY = evt.clientY-offsetY;
Here is a better version of your hit-test. This uses the Pythagorean theorm to see if the mouseclick is within the radius of the circle:
var dx=cx-clickX;
var dy=cy-clickY;
if( dx*dx+dy*dy <= r*r )
{
alert("you are inside the circle");
}
(Optionally) here is how to use javascript to listen for click events in the canvas:
canvas.addEventListener("click",handleEvent);
(Optionally) You might take a look at jQuery which is a solid, excellent library that handles cross-browser differences so you don't have to do this:
var evt = e ? e:window.event;
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/zLzwU/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{
background: #3e3e3e;
}
#canvas{
background:white;
border: 2px solid yellow;
}
</style>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var offsetX=canvas.offsetLeft;
var offsetY=canvas.offsetTop;
var cx=canvas.width/2;
var cy=canvas.height/2;
var r=20;
ctx.beginPath();
ctx.arc(cx,cy,r,0,2*Math.PI,false);
ctx.closePath();
ctx.stroke();
function handleEvent(e){
var evt = e ? e:window.event;
clickX = evt.clientX-offsetX;
clickY = evt.clientY-offsetY;
var dx=cx-clickX;
var dy=cy-clickY;
if( dx*dx+dy*dy <= r*r )
{
alert("you are inside the circle");
}
return false;
}
canvas.addEventListener("click",handleEvent);
}; // end init;
</script>
</head>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>
这篇关于从鼠标点击比较的坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
