在画布中单击弧线

我有一个名为城市的数组，其中包含用笛卡尔点表示城市的对象。从数据库中查询这些城市，然后在画布中绘制（工作正常）并将其推入此数组中。现在我想点击这些点，并且我想提醒（“你好”）用于测试目的。在画布中单击弧线

$(document).mousemove(function(e) { 
    x = e.pageX; 
    y = e.pageY; 
}); 
$(document).click(function(e) { 
    newx=x; 
    newy=y; 
    for(var i=0;i<cities.length;i++){ 
     if ((newx <= cities[i].x+3) && (newx >= cities[i].x-3) && (newy <= cities[i].y+3) && (newy >= cities[i].y-3)) { 
      alert(cities[i].name); 
     } 
    } 
});

这是我的事件代码。现在，当我点击从我的点到画布边缘的+ x和-y区域时，我只会得到一个反应。

请帮助

来源

2013-03-27 user2216743

命中测试城市圈在画布上

要检查，如果用户在你的城市圈的一个点击，使用毕达哥拉斯相关的点击测试：

var dx = cityCenterX – clickX; 
var dy = cityCenterY – clickY; 
var radius=cityRadius; 
var IsInCity = (dx*dx+dy*dy)<(cityRadius*cityRadius);

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/Bgh9d/

<!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-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    // define some cities 
    var cities=[]; 
    cities.push({x:100, y:75, radius:50, name:"large city"}); 
    cities.push({x:200, y:100, radius:30, name:"medium city"}); 
    cities.push({x:150, y:150, radius:25, name:"small city"}); 

    // draw cities 
    ctx.beginPath(); 
    ctx.lineWidth=3; 
    ctx.strokeStyle="blue"; 
    for (var i=0;i<cities.length;i++){ 
     ctx.beginPath(); 
     ctx.arc(cities[i].x, cities[i].y, cities[i].radius, 0 , 2 * Math.PI, false); 
     ctx.stroke(); 
    } 

    function handleMouseDown(e){ 
     // get canvasXY of click 
     canvasMouseX=parseInt(e.clientX-offsetX); 
     canvasMouseY=parseInt(e.clientY-offsetY); 

     // test if we clicked in any cities 
     for(var i=0;i<cities.length;i++){ 
      var dx=canvasMouseX-cities[i].x; 
      var dy=canvasMouseY-cities[i].y; 
      var isInCity=(dx*dx+dy*dy)<(cities[i].radius*cities[i].radius); 
      if(isInCity){ 
       alert("You clicked in the "+cities[i].name); 
      } 
     } 
    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

来源

2013-03-27 19:20:10 markE

毕达哥拉斯是一个选择家伙和所有，但也许尝试isPointInPath方法。

你没有说，但如果你正在使用“路径”（context.beginPath，context.moveTo，context.lineTo等）将你的城市绘制到你的画布上，构建了isPointInPath方法。

您使用x，y点调用方法。

if(context.isPointInPath(50, 150)) { 
    alert('In path); 
}

查看this link的例子。

来源

2013-03-28 01:31:34 Jarrod

在画布中单击弧线

回答

相关问题